Aligning divs are side-by-side? - html

Question

I'm creating this interface for a travel website and I'm aligning two inputs side-by-side and they aren't aligning properly. I am most concerned with the Departure and Return inputs. The Return input and label are not aligning with the departure input and label.
Can someone checkout my code and suggest a solution. It's probably my vision, but if you can help me out, I'd appreciate it a bunch.
#container {
width: 400px;
height: 400px;
background-color: black;
float: left;
}
#menu {
background-color: black;
clear: both;
}
#flights {
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 50px;
color: white;
background-color: black;
float: left;
line-height: 50px;
text-align: center;
}
#flights:hover {
cursor: pointer;
background-color: gold;
color: black;
}
#hotels {
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 50px;
color: white;
background-color: black;
float: left;
line-height: 50px;
text-align: center;
}
#hotels:hover {
cursor: pointer;
background-color: gold;
color: black;
}
#cars {
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 50px;
color: white;
background-color: black;
float: left;
line-height: 50px;
text-align: center;
}
#cars:hover {
cursor: pointer;
background-color: gold;
color: black;
}
#bundle {
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 50px;
color: white;
background-color: black;
float: left;
line-height: 50px;
text-align: center;
}
#bundle:hover {
cursor: pointer;
background-color: gold;
color: black;
}
#flights-data {
font-family: helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width: 400px;
height: 400px;
float: left;
margin-top: 0;
background-color: gold;
padding: 10px;
}
label {
width: 180px;
height: '';
float: left;
margin: 0;
padding: 0;
}
input#flight-departure {
display: inline-block;
width: 48%;
height: 50px;
padding: 10px;
float: left;
margin-right: 10px;
margin-top: 0;
display: block;
margin-bottom: 5px;
}
input#flight-return {
display: inline;
width: 48%;
height: 50px;
padding: 10px;
float: left;
margin-right: 0px;
margin-top: 0;
margin-bottom: 5px;
}
input#fly-from,
input#fly-to,
input#passengers {
display: block;
width: 380px;
height: 50px;
margin-bottom: 5px;
padding: 10px;
}
#depart-block {
column-count: 2;
column-gap: 10px;
width: 385px;
height: 100px;
padding: 0;
margin: 0;
float: left;
}
#find-a-flight {
width: 380px;
height: 50px;
line-height: 50px;
background-color: black;
color: white;
border-radius: 30px;
text-align: center;
margin-top: 10px;
}
#find-a-flight:hover {
cursor: pointer;
background-color: white;
border: 2px solid black;
color: black;
}
label#return {
margin: 0;
}
div.active#flights {
background-color: gold;
color: black;
}
<div id="container">
<div id="menu">
<div class="active" id="flights">Flights</div>
<div id="hotels">Hotels</div>
<div id="cars">Cars</div>
<div id="bundle">Bundle</div>
</div>
<div id="flights-data">
<label for="fly-from">Flying from</label><br>
<input type="text" id="fly-from" value="Departure city or Airport">
<label for="fly-to">Flying to</label><br>
<input type="text" id="fly-to" value="Departure city or Airport"><br>
<div id="departing-block">
<label for="Departure">Departing Flight</label><br>
<input type="text" id="flight-departure" value="Pick-a-date">
<label id="return" for="Return">Returning</label><br>
<input type="text" id="flight-return" value="Pick-a-date">
</div>
<label for="passengers">Passengers</label><br>
<input type="text" id="passengers" value="1 Adult 0 Children">
<div id="find-a-flight">Find a Flight</div>
</div>

Answer 1

Do the following change in <div id="flights-data">:
<label for="fly-from">Flying from</label><br>
<input type="text" id="fly-from" value="Departure city or Airport">
<label for="fly-to">Flying to</label><br>
<input type="text" id="fly-to" value="Departure city or Airport"><br>
<div id="departing-block">
<div style="display: inline-block;">
<label for="Departure">Departing Flight</label><br>
<input type="text" id="flight-departure" value="Pick-a-date">
</div>
<div style="display: inline-block;">
<label id="return" for="Return">Returning</label><br>
<input type="text" id="flight-return" value="Pick-a-date">
</div>
</div>
<label for="passengers">Passengers</label><br>
<input type="text" id="passengers" value="1 Adult 0 Children">
<div id="find-a-flight">Find a Flight</div>
</div>
this will align both the inputs side-by-side properly. I have checked it.