title: How do i split my html page into two?
body: <p>Basically i want this two maps to be on the same line.One in the right and the other in the left, but i get one in top and the other in the bottom.
  I think that might be achievable with CSS positioning but i am still a beginner at CSS, i divided the two maps with  so that it's more obvious to you guys.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;iframe
    width="400"
    height="400"
    frameborder="0" style="border:0"
    src="https://www.google.com/maps/embed/v1/directions?key=MYAPIKEY&amp;origin=Marrakech+Menara+Airoport+Morocco&amp;destination=Faculté+des+sciences+Marrakech+Morocco&amp;avoid=tolls|highways" allowfullscreen&gt;
  &lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Traffic layer&lt;/title&gt;
      &lt;style&gt;
        #map {
          height: 400px;
          width: 400px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;script&gt;
        function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: {lat: 31.650456, lng: -8.016392}
          });
  
          var trafficLayer = new google.maps.TrafficLayer();
          trafficLayer.setMap(map);
        }
      &lt;/script&gt;
      &lt;script async defer
      src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&amp;callback=initMap"&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>