I am faced with a challenge involving two inputs inside a div.
Below is the code snippet:
<div style="width:100%;height:500px;border-style:solid;border-color:#1d69b4;margin-top:25px;">
<div style="float:left; width:70%;height:100%;">
<div style="width:100%;height:30%;">
<form>
<input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/>
<input class="form-control" type="text" id="lname" name="lname" placeholder="From" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/>
</form>
</div>
</div>
</div>
The issue lies in the fact that they are floating to the left due to the div element.
My desired layout is as follows:
<div style="width:100%;height:500px;border-style:solid;border-color:#1d69b4;margin-top:25px;">
<div style="width:100%;height:30%;">
<form>
<input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/>
<input class="form-control" type="text" id="lname" name="lname" placeholder="From" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/>
</form>
</div>
</div>
However, I want the div element to float to the left. How can I achieve this?