Cloud Stack Ninja

I'm trying to get the following layout in which I visualised in Microsoft Word:

enter image description here

where the left elements are radio button group and the blue element is a button.

In HTML, I'm able to get the following:

enter image description here

However, I'm having issues with the "ENROL" button as I couldn't think of a way to get it to appear beside the radio button group like the visualisation above. Would appreciate some help on this.

.enrol_class {
    border: 1px solid black;
}

.enrol_class ul {
    list-style: none;
}
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>testform</title>
    <link rel = "stylesheet" href = "test2.css">
</head>

<body>
    <div class = "enrol_class">
        <ul>
            <li>
                <input type = "radio" id = "rad_1" name = "classes" class = "radio_btn">
                <label for="rad_1">Class 1</label>
            </li>
            
            <li>
                <input type = "radio" id = "rad_2" name = "classes" class = "radio_btn">
                <label for="rad_2">Class 2</label>
            </li>

            <li>
                <input type = "radio" id = "rad_3" name = "classes" class = "radio_btn">
                <label for="rad_3">Class 3</label>
            </li>
        </ul>
        <button type = "button" id = "enrol_btn">ENROL</button>
    </div>
</body>



Read more here: https://stackoverflow.com/questions/64403484/placing-button-beside-radio-button-group

Content Attribution

This content was originally published by Maxxx at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: