JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="about-container">
  <div class="text">
    <img src="https://picsum.photos/id/676/500/300" alt="">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ullam iure illo, magni molestiae esse earum neque harum quae repellat animi enim reprehenderit quasi repudiandae, facilis, ducimus accusamus. Mollitia, nesciunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ullam iure illo, magni molestiae esse earum neque harum quae repellat animi enim reprehenderit quasi repudiandae, facilis, ducimus accusamus. Mollitia, nesciunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ullam iure illo, magni molestiae esse earum neque harum quae repellat animi enim reprehenderit quasi repudiandae, facilis, ducimus accusamus. Mollitia, nesciunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ullam iure illo, magni molestiae esse earum neque harum quae repellat animi enim reprehenderit quasi repudiandae, facilis, ducimus accusamus. Mollitia, nesciunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ullam iure illo, magni molestiae esse earum neque harum quae repellat animi enim reprehenderit quasi repudiandae, facilis, ducimus accusamus. Mollitia, nesciunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ullam iure illo, magni molestiae esse earum neque harum quae repellat animi enim reprehenderit quasi repudiandae, facilis, ducimus accusamus. Mollitia, nesciunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ullam iure illo, magni molestiae esse earum neque harum quae repellat animi enim reprehenderit quasi repudiandae, facilis, ducimus accusamus. Mollitia, nesciunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ullam iure illo, magni molestiae esse earum neque harum quae repellat animi enim reprehenderit quasi repudiandae, facilis, ducimus accusamus. Mollitia, nesciunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit....

CSS

.about-container .text:nth-child(odd) img {
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  max-width: 50%;
}
.about-container .text:nth-child(even) img {
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
  max-width: 50%;
}
.about-container .text {
  margin-bottom: 30px;
}
.about-container .text:after {
  content: '';
  display: table;
  clear: both;
}
@media (max-width: 1023px){
  .about-container .text img {
    width: 100% !important;
    max-width: 100% !important;
  }
}