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">
    <meta charset = "UTF-8">
    <link rel = "stylesheet" href = "test2.css">

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

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

Read more here:

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: