JSFiddle - React, Tailwind, and code Playground

by canfrere

HTML

<div class="colonnedroite">
	<div class="prenom">Aurore Bal</div>
	<div class="separate"></div>
	<div class="profil_infos">
      <div class="row">
        <div class="profil_infos_label col">Age :</div><div class="profil_infos_infos col"></div>
      </div>
      <div class="row">
        <div class="profil_infos_label col">Ville natale :</div><div class="profil_infos_infos col">dqsdd</div>
      </div>
      <div class="row">
        <div class="profil_infos_label col">Situation familiale :</div><div class="profil_infos_infos col"> CĂ©libataire </div>
      </div>
      <div class="row">
        <div class="profil_infos_label col">Langues :</div><div class="profil_infos_infos col"> Turque </div>
      </div>
      <div class="row">
        <div class="profil_infos_label col">Sexe :</div><div class="profil_infos_infos col"> Masculin </div>	
      </div>
      <div class="row">
         <div class="profil_infos_label col">Mange bien :</div><div class="profil_infos_infos col">  </div>	
      </div>
      <div class="row">
        <div class="profil_infos_label col">Mange pas :</div><div class="profil_infos_infos col">  </div>	 
      </div>
      <div class="row">
        <div class="profil_infos_label col">Autres services:</div><div class="profil_infos_infos col"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione odio, dolorem iure dicta? Illum, reiciendis velit libero, expedita rem reprehenderit molestiae cum, pariatur facilis ab dolore quisquam, error sequi quia. </div>	   
      </div>
	</div>	
  </div>

CSS

*{
  box-sizing: border-box;
}
.colonnedroite .profil_infos {
margin:15px auto;
max-width: 500px;
font-size: 15px;
color: #808080;
border: 1px solid #ddd;
border-bottom: 0;
}
.row{
  border-bottom: 1px solid #ddd;
  width: 100%;
}
.row:nth-child(2n+1) {
  background-color: #efefef;
}
.row:hover{
  background-color: #e5e5e5;
}
.row:before, .row:after{
  display: table;
  content: " ";
}
.row:after{
  clear: both;
}
.col{
  float: left;
  min-height: 1px;
  width: 100%;
  padding: 10px;
}
.colonnedroite .profil_infos_infos {
color: #45668f;
}
@media only screen and (min-width: 520px){
  .colonnedroite .profil_infos {
    margin: 15px 0;
  }
  .col{
    width: 50%;
  }
}