JSFiddle - React, Tailwind, and code Playground

by rikazavr

HTML

<div class="container">
	  <div class="flex-item img-holder">
	  	<img src="http://picone.ru/images/12-yifisihi.jpg">
	  </div>
	  <div class="flex-item text-holder">
	  	<p>Нобелевские премии вручают каждый год, но именно вокруг гуманитарной дисциплины разгораются самые непримиримые споры. Почему? Перед тем, как начать разговор об авторах, попробуем выяснить, а что же такое эта нашумевшая Нобелевская премия по литературе, отчего о ней так много говорят, и надо ли быть литературным гением, чтобы получить награду.</p>
      <p>
      Нобелевские премии вручают каждый год, но именно вокруг гуманитарной дисциплины разгораются самые непримиримые споры. Почему? Перед тем, как начать разговор об авторах, попробуем выяснить, а что же такое эта нашумевшая Нобелевская премия по литературе, отчего о ней так много говорят, и надо ли быть литературным гением, чтобы получить награду.
      </p>
      <p>
      Нобелевские премии вручают каждый год, но именно вокруг гуманитарной дисциплины разгораются самые непримиримые споры.
      </p>
     </div>
</div>

CSS

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: stretch;
  align-items: stretch;
  width: 900px;
  margin: 0 auto;
  background: #fff;
}

.flex-item {
}

.img-holder{
  width: 370px;
  border: 1px solid black;
  overflow: hidden;
}

.img-holder img{
  width: 100%;
}

.text-holder{
  width: 70%;
  padding: 30px;
  border: 1px solid red;
}