JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="https://cdn.pixabay.com/photo/2017/04/05/11/56/image-in-the-image-2204798_960_720.jpg"></script>
<div class="global">
    <div class="left">
        <img src="https://cdn.pixabay.com/photo/2017/04/05/11/56/image-in-the-image-2204798_960_720.jpg" alt="image.jpg"/>
    </div>
    <div class="right">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac sapien ullamcorper, tincidunt neque a, auctor arcu. Nullam finibus quis enim ut tristique. Morbi sollicitudin varius dui eget feugiat. Duis sollicitudin, dolor ac tincidunt dignissim, erat neque placerat velit, dignissim laoreet nisl augue at risus. Fusce dictum ante nisl, id convallis est euismod lobortis. Etiam lobortis ultrices dictum. Quisque finibus condimentum leo, ac fringilla nunc lacinia id. In facilisis velit justo, sit amet malesuada enim imperdiet vel. Proin in auctor magna. Pellentesque malesuada, lorem dignissim hendrerit laoreet, ex felis ultricies lacus, ut placerat elit purus nec turpis. Duis ut neque eu est pellentesque suscipit non non orci. Pellentesque commodo viverra tellus, eu pellentesque mi porttitor vitae. Integer ligula diam, rutrum vitae rhoncus a, feugiat in velit. Integer consectetur mollis risus, in rutrum nulla tristique sit amet. Aliquam congue ac velit a pharetra. Curabitur ultricies enim quis placerat tempus.

<p>Curabitur ut nunc egestas, volutpat nisi id, commodo sapien. Ut vel suscipit urna, molestie ornare nisl. Sed scelerisque lorem mauris, pretium posuere elit aliquet et. Aenean dictum ipsum id augue posuere gravida. Sed pulvinar arcu et lectus fermentum, id tincidunt urna pellentesque. Nam congue lacinia ligula, sit amet facilisis massa pharetra eget. Aliquam in finibus erat. Cras lacinia hendrerit magna, ac semper eros rhoncus in.</p>
    </div>
</div>

CSS

.global {
  width:95%;
  box-shadow:0 0 3px rgba(0,0,0,.3);
  display:flex;
  flex-wrap:nowrap;
}

.left {
  width:50%;
}

.left img {
  width:99%;
  height:auto
}

.right {
  width:48%;
  padding: 0 1%;
  text-align:justify;
}

@media screen and (min-width:320px) and (max-width:500px) {
    @viewport { 
       width: device-width; 
    }
    .global {
        flex-direction:colum;
        justify-content:center;
        flex-wrap:wrap;
    }
    
    .left{
        width:99%;
    }
    
    .right {
        width:98%;
    }
  
}