JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div class="table">
    <div class="row">
        <div class="cell"></div>
        <div class="cell">
            <div style="display:block;"  style='width:100%;overflow:hidden'>
                <div id="map" style='width:100%;overflow:hidden'></div>
            </div>
        </div>
    </div>
</div>

CSS

.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    width: 50%;
    vertical-align: top;
}
.cell:first-child {
    background: orange;
}
#map {
    width:100%;
    height:300px;
}

JavaScript

var ymap;

ymaps.ready(function(){
    ymap = new ymaps.Map ("map", {
        center: [41.01771, 28.968484],
        zoom: 10
    },{
        autoFitToViewport: false
    });
});

window.onresize=function(){
 ymap.container.getElement().style.width = '100%'; 
 ymap.container.fitToViewport();
}