Cannot get div elements to line up

Question

I am making a website for my local church as charity work. I am a bit of an amateur when it comes to html/css.

For some reason the text is not lining up right. I want text directly to the right of the map. Instead, it is lining up below it.

HTML

<!-- SECTION 1 -->

<br><br><br><br>
<div class="main_body2 main_border">
<div id="map"></div>

<script>

var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 40.666070, lng: -74.11529 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: bangalore
  });

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  addMarker(bangalore, map);
}


function addMarker(location, map) {
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class="text">
<p class="text1">St John Byzantine Catholic Church <br>
15 E 26th St <br>
Bayonne, NJ 07002</p>
</div>
</div>

CSS

.text {
float: left;
width: 300px;
height: 300px;
}

.text1 {
font-size: 150%;
}

.main_body3 {
background-color: #fff;
margin: 0 auto;
margin-top: 125px;
margin-bottom: 50px;
padding: 10px;
width: 1000px;
height: 500px; 
border-radius: 7px;
}

.main_border {
border: 10px solid transparent;
padding: 0;
-webkit-border-image: url(../img/border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(../img/border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(../img/border.png) 30 stretch;
}

Here is the jsfiddle:

https://jsfiddle.net/wyj23jzs/

Here is the site:

http://saintjohnbayonne.com/Contact%20Us/index.php

Answer 1

Use CSS display :inline-block Or display :inline

In your case, you can use float

#map {
    float:left;
}
.text1 {
font-size: 150%;
    float:right;
}

Answer 2

Replace float:left; with display:inline-block; in .text and add display:inline-block; to #map.

.text {
  display:inline-block;
  width: 300px;
  height: 300px;
}

#map {
  display:inline-block;
  width: 500px;
  height: 500px;
}

The updated jsfiddle can be found here: https://jsfiddle.net/wyj23jzs/1/

The bad thing, is that the text is to close to the map. To add some space, just add margin-right:10px;to the #map:

#map {
      display:inline-block;
      width: 500px;
      height: 500px;
      margin-right:10px;
    }

Answer 3

You Should change your #map and .text classes a bit as follows

CSS

.text {
  display: inline-block;
  vertical-align:top;
  width: 300px;
  height: 300px;
}

#map {
  display:inline-block;
  width: 500px;
  height: 500px;
}