JSFiddle - React, Tailwind, and code Playground

by canfrere

HTML

<div class="colonnedroite">
	<div class="prenom">Aurore Bal</div>
	<div class="separate"></div>
  
  <table class="profil_infos">
    <tr>
      <th>Age :</th>
      <td></td>
    </tr>
    <tr>
      <th>Ville natale :</th>
      <td>dqsdd</td>
    </tr>
    <tr>
      <th>Situation familiale :</th>
      <td>CĂ©libataire</td>
    </tr>
    <tr>
      <th>Langues :</th>
      <td>Turque</td>
    </tr>
    <tr>
      <th>Sexe :</th>
      <td>Masculin</td>
    </tr>
    <tr>
      <th>Mange bien :</th>
      <td></td>
    </tr>
    <tr>
      <th>Mange pas :</th>
      <td></td>
    </tr>
    <tr>
      <th>Autres services :</th>
      <td>
        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.
      </td>
    </tr>
  </table>
  </div>

CSS

*{
  box-sizing: border-box;
}
.colonnedroite .profil_infos {
margin:15px 0;
width: 100%;
max-width: 500px;
font-size: 15px;
color: #808080;
border: 1px solid #ddd;
border-bottom: 0;
border-collapse: collapse;
}
.colonnedroite .profil_infos tr{
   border-bottom: 1px solid #ddd;
}
.colonnedroite .profil_infos tr:nth-child(2n+1){
   background-color: #efefef;
}
.colonnedroite .profil_infos tr:hover{
   background-color: #e5e5e5;
}
.colonnedroite .profil_infos tr th, .colonnedroite .profil_infos tr td{
  padding: 10px;
  vertical-align: top;
  width: 50%;
}
.colonnedroite .profil_infos tr th{
  text-align: left;
  font-weight: normal;
}
.colonnedroite .profil_infos tr th+td{
  color: #45668f;
}
@media only screen and (max-width: 520px){
  .colonnedroite .profil_infos{
    margin:15px auto;
  }
  .colonnedroite .profil_infos tr {
    display: block;
  }
  .colonnedroite .profil_infos tr th, .colonnedroite .profil_infos tr td{
    display: block;
    width: 100%;
  }
}