How do I move the radio buttons down?

user_5048412 0
Viewed 210

My question is the following: What do I do (either in the HTML, CSS, or both) to move the radio buttons down? I want it so that the first radio button is in-line with the question and the following radio buttons are beneath the first i.e. listed in a 1,2,3 order going down.

My HTML is:

<div class="question">
    <label>At what time of day did it happen?</label>
</div>
<div class="answer">
    <input type="radio" id="morning"><label for="morning"> Morning</label><br>
    <input type="radio" id="afternoon"><label for="afternoon"> Afternoon</label><br>
    <input type="radio" id="evening"><label for="evening"> Evening</label>
</div>

And my CSS is:

.question {
    border: 1px solid black;
    display: inline-block;
    width: 45%;
    text-align: right;
}

.answer {
    border: 1px solid black;
    display: inline-block;
    text-align: left;
    width: 45%;
}
radio-button css html
2 Answers

You can use additional div wrapper class container and flexbox properties align-items:flex-start, justify-content: center and A little white space like gap properties in this case.

.wrapper{
  display: flex;
  align-items:flex-start;
  justify-content: center;
  gap: 1rem;
}

.question {
    border: 1px solid black;
    display: inline-block;
    width: 45%;
    text-align: right;
}

.answer {
    border: 1px solid black;
    display: inline-block;
    text-align: left;
    width: 45%;
}
<div class="wrapper">
  <div class="question">
    <label>At what time of day did it happen?</label>
</div>
<div class="answer">
    <input type="radio" id="morning"><label for="morning"> Morning</label><br>
    <input type="radio" id="afternoon"><label for="afternoon"> Afternoon</label><br>
    <input type="radio" id="evening"><label for="evening"> Evening</label>
</div>
</div>

user_137059790

I figured it out. I just need to add vertical-align: top; to .answer's CSS

user_50484120
Related