JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">
<div class="main">

<div class="left">left</div>
<div class="right">Nunc tempor lorem eu metus ullamcorper dignissim. Aenean vel leo vel justo sollicitudin laoreet nec at mi. Ut pretium nibh urna, vitae facilisis velit commodo eget. Morbi nisl nisi, dictum quis malesuada id, scelerisque at tortor. Pellentesque convallis nec diam non malesuada. Aliquam erat volutpat. Ut sit amet pulvinar ante. Donec posuere, leo at ultricies bibendum, odio nunc iaculis magna, quis sollicitudin lacus tortor sit amet erat.</div>





</div>
</div>

CSS

body {margin:0;background-color:#ccc;}
.container {max-width:960px;margin:auto;background-color:#999;}
.main {max-width:940px;margin:10px;background-color:#aaa;}

.left {float:left;background: #efefef;width: 500px;height: 500px;}
.right {background-color:#ccc;margin-left:510px;}

@media screen and (max-width: 980px) {
.left {float:left;background: #efefef;width: 440px;height: 440px;}
.right {background-color:#ccc;margin-left:450px;}  
}
@media screen and (max-width: 768px) {
.left {float:none;background: #efefef;width: 440px;height: 440px;margin:auto;}
.right {max-width:440px;background-color:#ccc;margin:auto;}  
}
@media screen and (max-width: 480px) {
.left {float:none;background: #efefef;width: 300px;height: 300px;margin:auto;}
.right {max-width:400px;background-color:#ccc;margin:auto;}  
}