JSFiddle - React, Tailwind, and code Playground

HTML

<div class="columns">
    <div class="block">
        <div class="ui-bar ui-bar-a">
            <p>ридцатилетняя война — военный конфликт за 

гегемонию в Священной Римской империи и Европе, прной 

религиозной войной в Европе и породил вестфальскую систему 

международных отношений.</p>
        </div>
    </div>
    <div class="block">
        <div class="ui-bar ui-bar-a">
            <p>ридцатилетняя война — военный конфликт за 

гегемонию в Священной Римской империи и Европе, 

продолжавшийся с 1618 по 1648 год и затронувший в той или 

иной степени практически все европейские страны. Война 

началась как религиозное столкновение между протестантами 

и католиками империи, но затем переросла в борьбу против 

доминирования Габсбургов в Европе. Конфликт стал последней 

крупной религиозной войной в Европе и породил вестфальскую 

систему международных отношений.</p>
        </div>
    </div>
    <div class="block">
        <div id="map"></div>
    </div>
    <div class="block">
        <div class="ui-bar ui-bar-a">
            <p>ридцатилетняя война — военный конфликт за 

гегемонию в Священной Римской империи и Европе, 

продолжавшийся с 1618 по 1648 год и затронувший в той или 

иной степени практически все европейские страой в Европе и 

породил вестфальскую систему международных отношений.</p>
        </div>
    </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="//api-maps.yandex.ru/2.1/?lang=ru"></script>
<script>
   var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

CSS

.columns {
    max-width: 32em;
    margin: 0 auto;
    margin-top: 1em;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
    column-fill: balance;
}
.block {
    width: 15em;
    margin-bottom: 1em;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
#map {
    width: 100%;
    height: 20em;
}