JSFiddle - React, Tailwind, and code Playground

HTML

<div class="exprimez-vous">
	                             <div>
								 	  <h2 class="titre-oui-border-bas">Exprimez-vous</h2>
									  <p class="exprimez-vous-bouttons-staut">
									                                          <button type="submit" onClick="" class="buttonsstatut" title="statut"><span class="icon-exprimezvousstatut" title="statut"></span>statut</button>
																			  <button type="submit" onClick="" class="buttonsstatut" title="photo"><span class="icon-exprimezvousphoto" title="photo"></span>photo</button>
																			  <button type="submit" onClick="" class="buttonsstatut" title="vidéo"><span class="icon-exprimezvousvideo" title="vidéo"></span>vidéo</button>
									  </p>								 
									
									<p class="exprimez-vous-grande-zone-gauche">avatar</p>
									<p class="exprimez-vous-grande-zone-droite"><input class="global-input" type="text" placeholder="Enter Username" id="username" name="username" /></p>
									

									
									<p class="exprimez-vous-grande-zone-select">select</p>
									<p class="exprimez-vous-grande-zone-boutton"><button type="submit" onclick="" class="buttons" title="Publier">Publier</button></p>
									
								 </div>
								 <div>
	                                <div class="exprimez-vous-auteur-avatar-date-texte">
									                                               <p class="exprimez-vous-moyen-avatar">avatar</p>
									                                               <p class="exprimez-vous-pseudo">pseudo</p>
																				   <p class="exprimez-vous-date">date</p>
									</div>
									<div class="exprimez-vous-texte">
									                                        <p>son texte</p>
																			<p>3 personnes aiment ça</p>
																			<p>3 personnes n'aiment pas ça</p>
									</div>
	  <p class="exprimez-vous-bouttons">
	                                      <button type="submit" onClick="" class="buttons" title="statut"><span...

CSS

.exprimez-vous div
	  {
      border:#CCCCCC 1px solid;
	  margin:auto;
	  margin-top:1em;
	  margin-bottom:1em;
	  max-width:70em;
	  }

      .exprimez-vous-bouttons-staut 
	  {
	  margin:0em;
	  padding:0em;
	  }


	  .exprimez-vous-grande-zone-gauche
	  {
	  float:left;
	  width:10em;
	  margin:0em;
	  background-color:#FF3366;
	  min-height:6em;
	  }

	  .exprimez-vous-grande-zone-droite
	  {
	  margin-left:10em;
	  margin-top:0em;
	  margin-bottom:0em;
	  background-color:#FF3366;
	  border-left:#CCCCCC 1px solid;
	  min-height:6em;
	  }



	  .exprimez-vous-grande-zone-select
	  {
	  float:left;
	  width:60em;
	  margin:0em;
/*	  width:80px;*/
	  background-color:#FF3366;
	  border-top:#CCCCCC 1px solid;
	  min-height:4em;
	  }

	  .exprimez-vous-grande-zone-boutton
	  {
	  margin-top:0em;
	  margin-bottom:0em;
	  margin-left:60em;
	  background-color:#FF3366;
	  border-left:#CCCCCC 1px solid;
	  min-height:4em;
	  border-top:#CCCCCC 1px solid;
	  }






	  .exprimez-vous-auteur-avatar-date-texte
	  {
	  display: flex;
	  border:0px !important;
	  margin:0em !important;
	  }
	  .exprimez-vous-auteur-avatar-date-texte p
	  {
	  margin:0em;
	  }
	  .exprimez-vous-auteur-avatar-date-texte p + p
	  {
	  border-left:#CCCCCC 1px solid;
	  }
	  .exprimez-vous-moyen-avatar:nth-child(1)
	  {
	  order: 1;
	  flex:1;
	  max-width:5em;
	  }
	  
	  .exprimez-vous-pseudo:nth-child(2)
	  {
	  order: 2;
	  flex:1;
	  }
	  
	  .exprimez-vous-date:nth-child(3)
	  {
	  order: 3;
	  flex:1;
	  max-width:15em;
	  }

      .exprimez-vous-texte
	  {
	  margin-top:0em !important;
	  border:0px !important;
	  }

      .exprimez-vous-texte p
	  {
	  margin:0em;
	  border-top:#CCCCCC 1px solid;
	  }
      .exprimez-vous-bouttons 
	  {
	  border-top:#CCCCCC 1px solid;
	  padding:0;
	  margin:0;
	  }


	  .exprimez-vous-button-commentaire div
	  {
	  }


	  .exprimez-vous-button-commentaire div + div
	  {
	  }
	  .exprimez-vous-commentaire
	  {
	  border-top:#CCCCCC 1px solid;
	 ...