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="//api-maps.yandex.ru/2.1/?lang=ru"></script>
<script>
    $(function() {
        ymaps.ready(init);
    });

    function init() {
        var myMap = new ymaps.Map("map", {
            center: [55.76, 37.64],
            zoom: 10,
            controls: ["geolocationControl", 

"fullscreenControl", "zoomControl"]
        });
    }
</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;
}