how to position elements next to each other in a div?

Question

I am trying to position the elements next to each other. but the third field keeps appearing in a separate row.

<div class="row">
  <label>
    <input name="select_source" id="select-source-radio-btn" type="radio"/>
    <span style="font-size: medium;font-weight: bold;  margin: 5px;">SELECT A SOURCE</span>
  </label>
  <label>
    <input name="select_source"  id="select-group-radio-btn" type="radio"/>
    <span style="font-size: medium ;font-weight: bold;">SELECT A GROUP</span>
  </label>
  <div class="input-field">
    <input id="email" type="email" class="validate" placeholder="Email">
  </div>
</div>

How can i position the two radio buttons and email field next to each other? i tried adding float:left and float:right to the second element.

Answer 1

I think that using flexbox is a much better approach to organize elements like this. It's mostly supported, not buggy as floats and easy to use.

.disp {
  display: flex;
justify-content: space-evenly;
}

<div class="row disp">
  <label>
    <input name="select_source" id="select-source-radio-btn" type="radio"/>
    <span style="font-size: medium;font-weight: bold;  margin: 5px;">SELECT A SOURCE</span>
  </label>
  <label>
    <input name="select_source"  id="select-group-radio-btn" type="radio"/>
    <span style="font-size: medium ;font-weight: bold;">SELECT A GROUP</span>
  </label>
  <div class="input-field disp">
    <input id="email" type="email" class="validate" placeholder="Email">
  </div>
</div>