Does anyone know why the text inside this div is not in line with the rest (eg. Name, Email, Age, Select are all inline and for some reason Location moves towards the left)?
Here’s my code:
<!-- Dropdown box-->
<div class="rowTab">
<div class="label-select">
<label> Select your favourite sauce: </label>
</div>
<div class="select-input">
<select>
<option value="BBQ">BBQ</option>
<option value="Chili">Chili</option>
<option value="Mayo">Mayo</option>
<option value="Kethcup">Kethcup</option>
</select>
</div>
</div>
<!-- Radio buttons-->
<div class="rowTab">
<div class="labels-radio">
Location:
</div>
<div class="input-radio">
<ul>
<li class="radio"><input type="radio" name="location">
<label for="Kuala Lumpur">Kuala Lumpur</label></li>
<li class="radio"><input type="radio" name="location">
<label for="New York"> New York </label></li>
<li class="radio"><input type="radio" name="location">
<label for="Madrid">Madrid</label></li>
<li class="radio">
<input type="radio" name="location">
<label for="Panama">Panama</label></li>
</ul>
</div>
And my CSS:
.select-input {
display: inline-block;
text-align: left;
width: 48%;
}
.label-select {
display: inline-block;
width: 40%;
text-align: right;
}
.labels-radio {
display: inline-block;
width: 40%;
text-align: right;
vertical-align: 30px;
margin: 0px;
padding: 0px;
}
.input-radio {
display: inline-block;
text-align: left;
width: 58%;
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
can you provide code on codepen???
your ul tag have padding set to 40px that is reason for that space
add padding:0; to your ul style
Hey! I appreciate your help but I just tried doing that and this is how it looks now:
Im not sure if this is 100% the way to do this. But I used float and minor tweeking.
All I did was add float to both of these as well as changed the width to 46% on .labels-radio. If this is what you wanted hopefully this helped? 
.labels-radio { float: left; display: inline-block; width: 46%; text-align: right; vertical-align: 30px; margin: 0px; padding: 0px; }
.input-radio { float: right; display: inline-block; text-align: left; width: 58%; margin: 0px; padding: 0px; }
2 Likes
The problem I found was that “Location” was not in-line with Name, Age, Email, Select. It was kinda doing its own thing. So I floated it to where I wanted to lol.
Hey Pamela! Yes, that was VERY helpful. However, how can I move it so its next to the radio buttons?
So try messing with your input.radio margin. having a negative value can raise the height of it. like for instance -50px?
Hope that helped 
The reason being why the location label and the radio buttons doesn’t line up is because the input-radio div is wider than what the line can fit, so it pushes it off into a new line. You can check this out by setting a background color to your location label and radio button label.
After some tinkering I decreased the width of the radio button by a smudge, like at 50%, but then it will seem a little off still, since inherently, ul will come with margin and padding, so I set both margin and padding to 0, for the ul. Doing that sets the buttons and label on the same line.
1 Like
Yup that too, that would be easiest, but then you would have to refactor the rest of your code, where you have the other divs with a set width and float properties.
@dimtodim
Totally forgot about flex still had to mess with a bit of padding though. But this is the outcome of this code.
.labels-radio { display: flex; flex-direction: column; width: 46%; text-align: right; vertical-align: 40px; }
.input-radio { display: flex; flex-direction: right; display: inline-block; text-align: left; margin: -35px; padding: 0px 0px 0px 20px; }
