How to align radio buttons with text to the left?

Question

Still working on a survey form project and am having trouble with button alignment.

As this example below shows, the first radio button should be in line with the text to the left which is the question:

However, I have played around with display and other CSS elements, even trying margin and padding, none of which seem to make my buttons line up correctly. My buttons shown below:

And my relevant code shown below that produced my incorrect result:

HTML:

 <label for="recommend">*How likely is that you would recommend freeCodeCamp to a friend?</label>
      <div class="button-group">
        <div class="label-button"> <label for="recommend"><input type="radio" id="recommend" class="input-box" name="recommend" value="definitely">Definitely</label>
        </div>
<div class="label-button">
        <input type="radio" name="recommend" class="input-box" name="recommend" value="maybe">Maybe</label>
      </div>
      <div class="label-button">
        <input type="radio" name="recommend" class="input-box" name="recommend" value="not-sure">Not sure</label>
  </div>

CSS:

#survey-form {
  width: 70%;
  max-width: 640px;
  margin: 0 auto;
}
.row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.row > * {
  flex-basis: 50%;
  box-sizing: border-box;
}
.row label {
  text-align: right;
}
.input-field {
  margin-left: 1em;
  padding: 0.5em;
  margin-bottom: 0.5em;
  height: 40px;
  width: 280px;
  border: 1px solid gray;
  border-radius: 2px;
}
.input-select {
  margin-left: 1em;
  padding: 0.5em;
  margin-bottom: 0.5em;
  width: 100px;
  height: 40px;
  border: 1px solid gray;
  border-radius: 2px;
}
.button-group {
  padding-left: 0.5em;
}
form {
  width: 70%;
  max-width: 640px;
  margin: 0 auto;
}
.label-button {
  margin-bottom: 0.5em;
}

Codepen link also here: https://codepen.io/jerryd2304/pen/qvERZL

@VarshaDhadge I know, I accidentally clicked post early, so I had to edit and finish the question. Apologies. — Jerry D, Feb 28 '19 at 14:40

score 2 · Accepted Answer · edited Apr 30 '21 at 12:41

2

You need to add align-item: flex-start

.row.align-item-start {
    align-items: flex-start;
}

 <div class="row align-item-start">

Here is the codepen link for the same

edited Apr 30 '21 at 12:41

Ferie

1,358
21
36

answered Feb 28 '19 at 14:59

Guru1988

482
3
10

2

I tried this, gave me this result: https://codepen.io/jerryd2304/pen/qvOMrG – Jerry D Feb 28 '19 at 15:27
2

Awesome! Thank you very much! – Jerry D Feb 28 '19 at 15:50

How to align radio buttons with text to the left?

1 Answers1