JSFiddle - React, Tailwind, and code Playground

by suadam

HTML

<div class="ornek1">Yan Yana</div>
<div class="ornek1">Yan Yana</div>

<div class="temizle"></div>

<div class="sol">Sol</div>
<div class="sag">Sağ</div>

<div class="temizle"></div>

<div class="yazi">     
<p>  
 <img src="http://daniskaner.com/uploads/posts/2013-09/1378525670_css.png"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec malesuada nisi, suscipit lobortis massa. Donec tempor tempus suscipit. Sed aliquet massa pulvinar tortor accumsan, ultricies pharetra justo ultrices. Nunc sit amet sapien et tortor rhoncus imperdiet vitae quis tellus. Sed aliquam rhoncus erat, in pellentesque nunc tincidunt sed. Sed a consequat eros. Fusce in mauris et sapien facilisis volutpat. Phasellus nec urna scelerisque arcu aliquet feugiat auctor eu urna. Proin hendrerit urna vel lorem porta, a sollicitudin lectus ullamcorper.
</p>
</div>

<div class="temizle"></div>

<div class="yazi2">     
<p>  
 <img src="http://daniskaner.com/uploads/posts/2013-09/1378525670_css.png"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec malesuada nisi, suscipit lobortis massa. Donec tempor tempus suscipit. Sed aliquet massa pulvinar tortor accumsan, ultricies pharetra justo ultrices. Nunc sit amet sapien et tortor rhoncus imperdiet vitae quis tellus. Sed aliquam rhoncus erat, in pellentesque nunc tincidunt sed. Sed a consequat eros. Fusce in mauris et sapien facilisis volutpat. Phasellus nec urna scelerisque arcu aliquet feugiat auctor eu urna. Proin hendrerit urna vel lorem porta, a sollicitudin lectus ullamcorper.
</p>
</div>

CSS

body {

  background-color:#325780;
}

div {
  background-color:#FFFFFF;
  width:200px;
  border:1px solid black;
  font:bold 22px/100px Tahoma;
  text-align:center; 
}

.temizle{
    clear:both;
    
}

.ornek1 {
    float:left;   
    margin:1px;
}

.sol {
    
    float:left;
}

.sag {
    
    float:right;
}
.yazi{
    width:400px;
    line-height: 20px;
    font:11px Tahoma;
    text-align: justify;

}

.yazi img {
    float:left; 
    margin: 0px 7px 2px 0px
}

.yazi2{
    width:400px;
    line-height: 20px;
    font:11px Tahoma;
    text-align: justify;

}

.yazi2 img {
    float:right; 
    margin: 0px 7px 2px 0px
}