JSFiddle - React, Tailwind, and code Playground

HTML

<!-- TOP 50% -->
<div class="row">
   <div style="background:red;">img</div>
   <div style="background:green;">txt</div>
</div>

<!-- BOT 50% -->
<div class="row">
   <div style="background:blue;">text</div>
   <div style="background:yellow;">img</div>
</div>

CSS

html,body {
    padding:0;
    margin:0;
    height:100%;
}

body {
    width:1600px;
}

.row {
    width:100%;
    height:50%;
}
.row div {
    width:50%;
    height:100%;
    float:left;
}