JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thread">
   
   <div class="oppost">
      <div>
         <span class="post-name">Аноним</span>
         <span class="post-time"> 24.01.2017 10:22:59</span>
         <span class="post-number" id="1"><a href="#1">№</a><a href="#">1</a>&nbsp;</span>
      </div>
      <div>
         <span class="post-file-size"><a href="image.jpg">image.jpg</a>(57.93КБ, 604x442)</span>
      </div>
      <span class="post-image"><a href="image.jpg"><img alt="" src="https://lh5.ggpht.com/6G3wCupIFZy1NuiSYiGzPcPIj3PCyfB5wFb9wV-9tsayloSA_pVfb6TTWU1rgddo0A=w200"/></a></span>
      <span class="post-text">
Строка1<br/>
Строка2<br/>
Строка3<br/>
Строка4<br/>
Строка5<br/>
      </span>

   </div>

   <div class="post">
      <div>
         <span class="post-name">Аноним</span>
         <span class="post-time"> 24.01.2017 14:43:31</span>
         <span class="post-number" id="2"><a href="#2">№</a><a href="#">2</a>&nbsp;</span>
      </div>
      <div>
         <span class="post-file-size"><a href="image.jpg">image.jpg</a>(57.93КБ, 604x442)</span>
      </div>

      <span class="post-image"><a href="image.jpg"><img alt="" src="https://lh5.ggpht.com/6G3wCupIFZy1NuiSYiGzPcPIj3PCyfB5wFb9wV-9tsayloSA_pVfb6TTWU1rgddo0A=w200"/></a></span>
      <span class="post-text">
Строка1<br/>
Строка2<br/>
Строка3<br/>
Строка4<br/>
Строка5<br/>
Строка6<br/>
Строка7<br/>
Строка8<br/>
Строка9<br/>
Строка10<br/>
      </span>
   </div>

   <div class="post">
      <div>
         <span class="post-name">Аноним</span>
         <span class="post-time"> 24.01.2017 14:43:31</span>
         <span class="post-number" id="2"><a href="#2">№</a><a href="#">2</a>&nbsp;</span>
      </div>
      <div>
         <span class="post-file-size"><a href="image.jpg">image.jpg</a>(57.93КБ, 604x442)</span>
      </div>

      <span class="post-image"><a href="image.jpg"><img alt="" src="https://lh5.ggpht.com/6G3wCupIFZy1NuiSYiGzPcPIj3PCyfB5wFb9wV-9tsayloSA_pVfb6TTWU1rgddo0A=w200"/></a></span>
      <span...

CSS

.post-image{
  float:left;
  width:20%;
}

.post-text{
  float:left;
  width:80%;
  box-sizing:border-box;
  padding:0px 10px; 
}


img{
  width:100%;
}

/*
.oppost>div:not(.clr){
  padding-bottom:5px;
}
*/

.clr{
  clear:both;
}

.post {
   background:#DDDDDD;
   border: solid 1px #CCCCCC;
   overflow: auto;
}

/* Стиль */
body {
   background: #eeeeee;
   font-family: "Trebuchet MS", Trebuchet, serif;
}

a {
   color: #ff6600;
}

a:visited {
   color: #ff6600;
}

a:hover {
   color: #0066ff;
}

.thread {
   border: solid 1px #CCCCCC;
   overflow: auto;
}

.post-name {
   color: #004a99;
   font-weight: bold;
}

.post-time {
   font-size: 0.9em;
}

.post-number {
   font-size: 0.9em;
   font-weight: bold;
}

.post-file-size {
   color: #666666;
   font-size: .8em;
}