JSFiddle - React, Tailwind, and code Playground

by kreoTech

HTML

<div class="wrapper">



  <div class="flex-container">
  <div class='flex-center'>
  
  

    <div class="flex-box img">
      <img src="https://static.pexels.com/photos/6444/pencil-typography-black-design.jpg" alt="">
    </div>

    <div class="flex-box info">
      Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым. Это тестовый контент, который не должен нести никакого смысла, лишь показать наличие самого текста или продемонстрировать

    </div>
    </div>

  </div>
</div>

CSS

.wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 1px #000 solid;
}

.flex-container {
  border: 1px #0044ff solid;
  margin: 0 auto;
  width: 80%;
  height: 100%;
  text-align: left;
  line-height: 1.7;
  display: flex;
  align-items: center;
}
.flex-center {
  display:flex;
}

.info {
  flex: 2 300px;
}

.img {
  flex: 1 300px;
}

.img img {
  width: 100%;
}

.flex-box {
  border: 1px #cc0000 solid;
}