JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
	  function ajoutDiv(idParent)
	  {
	  var e, c;
	  e = document.createElement("div");
	  e.innerHTML = '								 <div class="panel-ajouter-bdd">
								                                   <div class="panel-bbd-nom"><input type="text" placeholder="non de la table" name="nondelatable" id="nondelatable" required /></div>
								                                   <div class="panel-bbd-type">afficher un select</div>
																   <div class="panel-bbd-taille"><input type="text" placeholder="non de la table" name="nondelatable" id="nondelatable" required /></div>
																   <div class="panel-bbd-valeur">afficher un select</div>
																   <div class="panel-bbd-interclassement">afficher un select</div>
																   <div class="panel-bbd-attribut">afficher un select</div>
																   <div class="panel-bbd-null"><input type="checkbox" id="supprimernews1" name="supprimernews1" /><label for="supprimernews1"></label></div>
																   <div class="panel-bbd-index">afficher un select</div>
																   <div class="panel-bbd-a-i"><input type="checkbox" id="supprimernews1" name="supprimernews1" /><label for="supprimernews1"></label></div>
																   <div class="panel-bbd-commentaire"><input type="text" placeholder="non de la table" name="nondelatable" id="nondelatable" required /></div>
								 </div>';
	  c = document.getElementById(idParent).firstElementChild;
	  document.getElementById(idParent).insertBefore(e,c);
	  }
	  </script>





<div class="ajouter" id="idParent">
	  <div>
	                             <!--début de la 1 er ligne catégorie-->
								 <div class="panel-ajouter-bdd">
								                                   <div class="panel-bbd-nom"><input type="text" placeholder="non de la table" name="nondelatable" id="nondelatable" required /></div>
								                                   <div class="panel-bbd-type">afficher un select</div>
																   <div...

CSS

/*******************************début flexbox************************************************************/

	  .panel-ajouter-bdd
	  {
	  display:flex;
	  border:#CCCCCC 1px solid;
	  border-top:0;
	  }

/*******************************fin flexbox**************************************************************/
/*******************************début order**************************************************************/

      .panel-bbd-nom {order:1;}
      .panel-bbd-type {order:2;}
      .panel-bbd-taille {order:3;}
	  .panel-bbd-valeur {order:4;}
	  .panel-bbd-interclassement {order:5;}
	  .panel-bbd-attribut {order:6;}
	  .panel-bbd-null {order:7;}
	  .panel-bbd-index {order:8;}
	  .panel-bbd-a-i {order:9;}
	  .panel-bbd-commentaire {order:10;}
/*******************************fin order****************************************************************/
/*******************************début collonne***********************************************************/

	  .panel-bbd-nom
	  {
	  width:23em;
	  text-align:center;
	  line-height:5em;
	  }
	  .panel-bbd-type
	  {
	  width:14em;
	  border-left:#CCCCCC 1px solid;
	  margin:0;
	  padding:1em;
	  }
	  .panel-bbd-taille
	  {
	  width:23em;
	  border-left:#CCCCCC 1px solid;
	  margin:0;
	  padding:1em;
	  }
	  .panel-bbd-valeur
	  {
	  width:14em;
	  border-left:#CCCCCC 1px solid;
	  margin:0;
	  padding:1em;
	  }
	  .panel-bbd-interclassement
	  {
	  width:14em;
	  border-left:#CCCCCC 1px solid;
	  margin:0;
	  padding:1em;
	  }
	  .panel-bbd-attribut
	  {
	  width:14em;
	  border-left:#CCCCCC 1px solid;
	  margin:0;
	  padding:1em;
	  }
	  .panel-bbd-null
	  {
	  width:4em;
	  border-left:#CCCCCC 1px solid;
	  margin:0;
	  padding:1em;
	  }
	  .panel-bbd-index
	  {
	  width:14em;
	  border-left:#CCCCCC 1px solid;
	  margin:0;
	  padding:1em;
	  }
	  .panel-bbd-a-i
	  {
	  width:4em;
	  border-left:#CCCCCC 1px solid;
	  margin:0;
	  padding:1em;
	  }
	  .panel-bbd-commentaire
	  {
	  width:23em;
	  border-left:#CCCCCC...