JSFiddle - React, Tailwind, and code Playground

HTML

<article class="row topic-message" id="00000">
  <aside class="message-aside">
    <div class="message-avatar">
      <img src="https://avenoel.org/images/avatars/Encephallus_d148822222f9fd92eb71069a697bef3e.png" alt="Avatar" />
    </div>
    <p class="message-infos">
      <span class="elem">Rang</span> : Bronze<br />
      <span class="elem">Messages</span> : 103<br />
      <span class="elem">Points</span> : 103
    </p>
      <a href="#406865" class="message-permalink">#406865</a>

  </aside>
  <div class="message-wrapper">
    <header class="message-header">
      <span class="message-username "><a href="https://avenoel.org/profil/RubiksCube" target="_blank">RubiksCubeAA</a></span>
              <span class="message-actions">
          
          
          <!-- Icon by : By A.Varghese, https://thenounproject.com/term/quote/14163/ -->
                      <span><a href="#" class="message-quote" title="Citer le message"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/14163-200.png" alt="Icône citation" /></a></span>
                    
		    		 </span>
             
            <div class="pull-right message-date">
        <span class="hidden-xs">le 10/11/2017 à 11:40:50</span>
        <span class="visible-xs">11:40:50</span>
      </div>
    </header>
    <div class="message-content">
      Coucou les kheys
      <br>
      <br>
      Procedente igitur mox tempore cum adventicium nihil inveniretur, relicta ora maritima in Lycaoniam adnexam Isauriae se contulerunt ibique densis intersaepientes itinera praetenturis provincialium et viatorum opibus pascebantur.
    </div>
      <footer class="message-footer">
    <p class="message-edited hidden-xs">
      Ce message a été édité le 10/11/2017 à 12:39:19
                      par Dieu
    </p>
  </footer>
  </div>
</article>




<article class="row topic-message odd " id="00000">
  <aside class="message-aside">
    <div class="message-avatar">
      <img...

CSS

article{
  display: flex;
  background: #E8F0F3;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  border: 1px solid #b8e2f2;
}

.odd{
  background: #f9f7ed;
  border-color: #f7d9d7;
}


.message-aside{
  width: 120px;
  margin-right: 10px;
}

.message-avatar img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.message-infos{
  font-size: 11px;
  font-family: "Roboto", sans-serif;
}
.message-infos .elem{
  color: #3b3b3b;
  font-size: 10px;
  font-family: "Roboto", sans-serif;
}

.message-aside{
  position: relative;
}

.message-permalink{
  position: absolute;
  bottom: 0;
  color: #848484;
  text-decoration: none;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
}



.message-wrapper{
  flex-grow: 1;
}

.message-header{
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dotted #b8e2f2;
  font-family: "Roboto", sans-serif;
}

.odd .message-header{
  border-bottom: 1px dotted #f7d9d7;
}


.message-quote img{
  width: 20px;
}

.message-username a{
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  color: #303030;
}

.message-actions{
  float: right;
}

.message-date{
  font-size: 11px;
  color: #7f7f7f;
}


.message-content{
  padding: 5px 0;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  word-wrap: break-word;
  position: relative;
  min-height: 136px;
  overflow: hidden;
}

.message-edited{
  color: #848484;
  font-size: 10px;
  font-style: italic;
  font-family: "Roboto", sans-serif;
}


.visible-xs{
  display: none;
}