How to make an element go below a different floated element - html

Question

Im sure it is a very simple fix that i just can't see. I want the second button on the left hand side to be below the one on the right hand side in terms of height on the page but still on the left hand side. I have included a JS fiddle
https://jsfiddle.net/fraserdale/knpvwhad/
Thanks for your help in advanced
<div >
<p>
<select id="shipping" style="float: right;">
<option value="-40">UK / AUS $40 </option>
<option value="-13.95">US $13.95</option>
<option value="-30">CAN $30</option>
<option value="0">Free</option>
</select>
Shipping:
</p>
</div>
<button class="button" onclick="myFunction()">Submit</button>
and the CSS
.button {
background-color: #41ad33;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px 4px 0px;
cursor: pointer;
}
select{
padding: 15px 9.25px ;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px 4px 0px;
cursor: pointer;

Answer 1

Set the button to be a block level element and then use clear property:
.button {
background-color: #41ad33;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px 4px 0px;
cursor: pointer;
display: block;
clear: right;
}
select {
padding: 15px 9.25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px 4px 0px;
cursor: pointer;
}
p {
font-weight: bold;
}
<div>
<p>
<select id="shipping" style="float: right;">
<option value="-40">UK / AUS $40 </option>
<option value="-13.95">US $13.95</option>
<option value="-30">CAN $30</option>
<option value="0">Free</option>
</select> Shipping:
</p>
</div>
<button class="button" onclick="myFunction()">Submit</button>

Answer 2

Instead of using a float, I would suggest using a flexbox container. Using the property justify-content: space-between; you can make sure that your select is aligned all the way to the right. Another benefit is that you can vertically align items in a flexbox with align-items: center;, which will remove the need to further position the label aswel.
For more info on flexbox, see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.button {
background-color: #41ad33;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px 4px 0px;
cursor: pointer;
clear:both;
}
select{
padding: 15px 9.25px ;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px 4px 0px;
cursor: pointer;
}
label {
font-weight: bold;
}
.input-container {
display:flex;
justify-content:space-between;
align-items: center;
}
<div class="input-container">
<label for="shipping">
Shipping:
</label>
<select id="shipping">
<option value="-40">UK / AUS $40 </option>
<option value="-13.95">US $13.95</option>
<option value="-30">CAN $30</option>
<option value="0">Free</option>
</select>
</div>
<button class="button" onclick="myFunction()">Submit</button>

Answer 3

Add a new element with the clear:both property to put the floating element below your right button like this
https://jsfiddle.net/RACCH/13rt8eom/
<div >
<p>
<select id="shipping" style="float: right;">
<option value="-40">UK / AUS $40 </option>
<option value="-13.95">US $13.95</option>
<option value="-30">CAN $30</option>
<option value="0">Free</option>
</select>
Shipping:
</p>
<div class="clear"></div>
<button class="button" onclick="myFunction()">Submit</button>
</div>