JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<div class="content">
<div class="outer-flex">
<div class="text inner-flex">
<div class="top-left">Lorem ipsum dolor sit.</div>
<div class="top-right">Lorem ipsum dolor sit.</div>
<div class="bottom-left">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bottom-right">Lorem ipsum dolor.</div>
</div>
<div class="image">
<div></div>
</div>
</div>
</div>
</body>
</html>
CSS
html{
font-size:62.5%;
}
html,body{
margin:0;
padding:0;
height:100%;
}
body{
font-size: 1.6rem;
}
*{
box-sizing: border-box;
}
.content{
margin: 0 10%;
}
.outer-flex{
display: flex;
justify-content: space-between;
align-items: baseline;
}
.inner-flex{
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
.text{
flex-basis: 80%;
}
.image{
align-self: center;
}
.image > div{
background-image: url("https://www1.xup.in/exec/ximg.php?fid=61400715");
width:17.2rem;
height: 3rem;
margin-left: 7.8rem;
}
.top-left,
.top-right,
.bottom-left,
.bottom-right
{
flex-basis: 50%;
}