JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="coberturas1"></div>
    <div id="coberturas2"></div>
</div>

CSS

#container{position:relative;}
#coberturas1 {
    background-color: rgba(55,57,62,0.8);
    width: 50%;
    height: 300px;
}
#coberturas2 {
    background-color: #efc94d;
    width: 50%;
    height: 300px;
    
    /* código para mostrar apenas 50% da div Cinzenta (coberturas1) */
    position:absolute;
    top:150px; /* 150px significa metade (que neste caso será 50%) do tamanho de ambas as divs */
    left:5px; /* muda este valor para "0" - Isto foi apenas mostrar o que está a acontecer por detrás da div */
}