JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">
   <div class="left">img</div>
   <div class="right">txt</div>
</div>

<!-- BOT 50% -->
<div class="bot">
   <div class="left">text</div>
   <div class="right">img</div>
</div>

CSS

.top, .bot {
    height: 50%;
    border: 1px solid black;
    box-sizing: border-box;
}

.left, .right {
    display: inline-block;
    width: 50%;
    height: 100%;
    margin-right: -4px;
    border: 1px solid red;
    box-sizing: border-box;
}

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