Aligning divs are side-by-side?

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.