JSFiddle - React, Tailwind, and code Playground

by Serg78

HTML

<div class="colonnedroite">
                <div class="affichage_publication_membre">
                    <div class="affichage_publication_membre_image">
                        <div class="image"><img src="http://image.noelshack.com/fichiers/2016/12/1458770990-bzfcyinajvo.jpg"/></div>
                    </div>
                    <div class="affichage_publication_membre_message">
                        <div class="nom">Cem Bal </div>
                        <div class="message">fsdfsdfs fsd fsd fsd fsdf sd fsdfsdfs fsd fsd fsd fsdf sdfsdfsdfs fsd fsd f
                        sd fsdf sdfsdfsdfs fsd fsd fsd fsdf sdfsdfsdfs fsd fsd fsd fsdf sdfsdfsdfs fsd fsd fsd fsdf 
                        sdfsdfsdfs fsd fsd fsd fsdf sdfsdfsdfs fsd fsd fsd fsdf sdfsdfsdfs fsd fsd fsd fsdf sdfsdfsdfs fsd fsd fsd fsdf sd</div>
                        <div class="action">
						  <span class="date">Il y a 5 minutes</span> | <span class="commentaires"><a href="">Commenter</a></span>

						  <span class="like">
						  J'aime ♥
						  </span>
						</div>
                    </div>
                </div>
                <div class="affichage_publication_membre">
                    <div class="affichage_publication_membre_image">
                        <div class="image"><img src="http://image.noelshack.com/fichiers/2016/12/1458770990-bzfcyinajvo.jpg"/></div>
                    </div>
                    <div class="affichage_publication_membre_message">
                        <div class="nom">Cem Bal </div>
                        <div class="message">asd fsdf sd</div>
                        <div class="action">
						  <span class="date">Il y a 5 minutes</span> | <span class="commentaires"><a href="">Commenter</a></span>

						  <span class="like">
						  J'aime ♥
						  </span>
						</div>
                    </div>
                </div>	
                <div class="affichage_publication_membre">
                    <div class="affichage_publication_membre_image">
...

CSS

.affichage_publication_membre {
			width:420px;
			position:relative;
			margin-bottom:10px;			
			}
			.affichage_publication_membre_image {
			width:68px; height:75px; float:left;
			position: absolute;
			}
			.affichage_publication_membre_image .image img {
			background-size: cover;
			width: 68px;
			height: 68px;
			float: left;    
			}

			.affichage_publication_membre_message {
			width:390px;
			margin-left: 80px;
			position: relative;
			}
			.affichage_publication_membre_message .message {
			overflow: hidden;           
			word-wrap: break-word;
			width:380px;
			}
			.affichage_publication_membre_message .nom {
			overflow: hidden;           
			width:380px;
			font-weight: bold;
			color: #45668f;
			}
			.affichage_publication_membre_message .action {
			overflow: hidden;           
			width:380px;
			display:inline-block;
			font-size: 11px;
			margin-top: 5px;
			}       
			.affichage_publication_membre_message .action .like{
			float:right;
			color: #C9D8E5;
			}       
			.affichage_publication_membre_message .action .date {
			color: #808080;
			}
			.affichage_publication_membre_message .action .commentaires a {
			color:#45668f;
			text-decoration:none;
			display:inline-block;
			}