JSFiddle - React, Tailwind, and code Playground
HTML
<div id='conteneur'>
<div id='titrentete'>Titre entête
</div>
<div id='titrechoix'>
<div id='choixgauche'>
</div>
<div id='choixintergauche'>
</div>
<div id='choixcentre'>Titre saisie 1
</div>
<div id='choixinterdroit'>
</div>
<div id='choixdroit'>Titre saisie 2
</div>
</div>
<div id='saisiechoix'>
<div id='saisiegauche'>
<p><label id='enhaut' class='lab_gauche' for='type'>Type : </label>
<select id='type' name=type>
<option>toto</option>
</select></p>
<p><label class='lab_gauche' for='test1'>Test1 : </label>
<input id='test1' name='test1'>
</div>
<div id='saisieintergauche'>
</div>
<div id='saisiecentre'>
<p><label class='lab_gauche' for='test2'>Test2 : </label>
<input id='test2' name='test2'>
</div>
<div id='saisieinterdroit'>
</div>
<div id='saisiedroit'>
</div>
</div>
</div>
CSS
#conteneur { /* Conteneur div principal */
display: table;
width: 990px;
height: 600px;
border: 1px solid black;
margin: 0 auto;
}
#titrentete { /* Conteneur div du titre entête */
display: table-caption;
width: 990px;
height: 30px;
/* border: 1px solid black;*/
padding-top: 3px;
padding-bottom: 3px;
font-family: Mistral;
font-size: 1.5em;
text-align: center;
}
#titrechoix { /* Conteneur div titre des choix */
display: table-row;
width: 990px;
height: 20px;
text-align : center;
/* vertical-align: bottom;*/
font-family: Mistral;
font-size: 1.5em;
border: 1px solid salmon;
padding-top: 3px;
}
#choixgauche { /* Conteneur div gauche titre des choix */
display: table-cell;
width: 250px;
height: 20px;
border: 1px solid black;
}
#choixintergauche { /* Conteneur div inter gauche titre des choix */
display: table-cell;
width: 50px;
height: 20px;
border: 1px solid blue;
}
#choixcentre { /* Conteneur div centre titre des choix */
display: table-cell;
width: 320px;
height: 50px;
border: 1px solid green;
}
#choixinterdroit { /* Conteneur div inter droit titre des choix */
display: table-cell;
width: 50px;
height: 50px;
border: 1px solid red;
}
JavaScript
/*
---------------------------------------------------------------------------
|............................Titre caption ...............................|
---------------------------------------------------------------------------
|.................|...|.....Titre saisie 1.....|...|....Titre saisie 2....|
|--------------------------------------------------------------------------
| --------------- |...| ---------------------- |...| -------------------- |
| | Select 1a ..| |...| | Zone 1a input .....| |...| | Zone 2a input ...| |
| | Select 1b ..| |...| | Zone 1b input .....| |...| | Zone 2b input ...| |
| --------------- |...| | Zone 1c input .....| |...| | Zone 2c input ...| |
|.................|...| | Zone 1d input .....| |...| | Zone 2d input ...| |
|.................|...| | Zone 1d input .....| |...| | Zone 2d input ...| |
|.................|...| ---------------------- |...| | Zone 2e input ...| |
|.................|...| ...................... |...| | Zone 2f input ...| |
| Bouton 1 .......|...| ...................... |...| | Zone 2d input ...| |
| Bouton 2 .......|...| ...................... |...| -------------------- |
---------------------------------------------------------------------------
*/