Div не отображаются рядом, несмотря на следующий онлайн-пример

Question

Я искал решение для устранения проблемы с двумя делениями, которые у меня не появлялись рядом. Это сбивает с толку, потому что я чувствую, что делаю именно то, что видел в нескольких примерах, найденных в Интернете. Как это сообщение StackOverflow.

Чего мне не хватает?

Спасибо!

<section class = "container">
    <div id="googleMap">
      <script src="redacted-for-privacy-of-group"></script>
    </div>
    <div id="showInfo">
      <img id="customerIMG" style="width: 100%">
      <p style="width: auto; height: auto" id="customerINFO"></p>
    </div>
 </section>

css

.container {
  width: 90%;
  height: 400;
  margin: auto;
  padding: 10px;
}

#googleMap {
  width: 70%;
  height: 400px;
}

#showInfo {
  background-color: white;
  margin-left: 70%;
  height: 400px;
}

Answer 1

<section class = "container">
    <div id="googleMap">
      <script src="redacted-for-privacy-of-group"></script>
    </div>
    <div id="showInfo">
      <img id="customerIMG" style="width: 100%">
      <p style="width: auto; height: auto" id="customerINFO"></p>
    </div>
 </section>

css

.container {
  width: 90%;
  height: 400px;
  margin: auto;
  padding: 10px;
}

#googleMap {
  width: 70%;
  height: 400px;
  float: left;
}

#showInfo {
  background-color: white;
  /*margin-left: 70%;*/
  width: 30%;
  height: 400px;
  float: left;
}

Answer 2

Использование float: left;

#googleMap {
  width: 70%;
  height: 400px;
  float:left;
}