radio buttons and their labels are not in same line

Question

Isn't that input radio and label are displayed in same line by default? I actively searched for this topic how to put them in same line but my labels are shown one line below radio buttons.

Here is html:

<div class = "buttons">
    <div class="group1">
        <div>
            <input id="op1" class="radio" checked="checked" name="options" type="radio" value="op1" />
            <label for="op1"> option1 </label>
        </div>
        <div>
            <input id="op2" class="radio" name="options" type="radio" value="op2" />
            <label for="op2"> option2 </label>
        </div>
    </div>
    <div class="group2">
        <div>
            <input id="op3" class="radio" name="options" type="radio" value="op3" />
            <label for="life_expectancy"> option3 </label>
        </div>
        <div>
            <input id="op4" class="radio" name="options" type="radio" value="op4" />
            <label for="normal"> option4 </label>
        </div>
        <div>
            <input id="op5" class="radio" name="options" type="radio" value="op5" />
            <label for="effective"> option5 </label>
        </div>
    </div>
</div>

Just for an understanding in whole contexts, I've attached CSS. But I use CSS only to colour the labels, different colour for each label.

Also, the issue that I have that labels are not in the same line with radio butoons is independent from flex. I'm using flex because I'd like to display the options that way:

    op1        op2 
op3         op4         op5

Even without the felx, the labels are not shown in the same line with radio buttons.

label[for="op1"] {
  color: #d0e562;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
  opacity: 0.8;
} 

label[for="op2"] {
  color: #ffae33;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
  opacity: 0.8;
} 

label[for="op3"] {
  color: #662c91;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px; 
  opacity: 0.8;
} 

label[for="op4"] {
  color: #F15F36;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;    
  opacity: 0.8;
}

label[for="op5"] {
  color: #19A0AA;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;  
  opacity: 0.8;
}  

.buttons {
  display: flex; 
  flex-direction: column; 
}

.group1 {
  display: flex; 
  justify-content: space-evenly;
  flex-direction: row;
}

.group2 {
    display: flex; 
    justify-content: space-evenly;
    flex-direction: row;
}

There must be something that I'm missing. Could you let me know how to display the labels next to buttons?

Answer 1

You have applied flex-direction:column on button class hence two lines.

Answer 2

To show the buttons in a column, delete the CSS styling for .group1 and .group2 classes.

.group1 {}

.group2 {} 

Then they will all be in the same line (1 column).