How To Position Elements Next To Each Other In A Div?

I am trying to position the elements next to each other. but the third field keeps appearing in a separate row. How can i position the two radio buttons and email field next to ea

Solution 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;
}

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

Solution 2:

You can add display block to both divs like this:

.disp {
  display:inline-block;
}

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

Solution 3:

you can do display:inline-block or float:left after the first div

Solution 4:

you can use css on the div if you want as well

div {
      display:inline-block;
    }

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

Solution 5:

If you don't wanna do CSS for the same try doing:

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

You shall get the desired results