JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel"><p>
  <div class="cadre-choice width-b-3 bg-car">Car</div>
  <div class="cadre-choice width-b-3 bg-avion">Avion</div>
  <div class="cadre-choice width-b-3 bg-autres">Autres</div>
  <div class="clear"></div>
</p></div>

CSS

div.panel { padding: 0; background-color: transparent; max-height: 0; transition: max-height 0.4s ease-out; }
div.panel .cadre-choice { float: left; background: rgba(250, 250, 250, 0.5); font-size: 16px; margin: 0 10px; padding: 40px; text-align: center; }
div.panel .cadre-choice:hover { background-color: rgba(250, 250, 250, 0.9); }
div.panel .cadre-choice .title { background-color: rgba(0, 0, 0, 0.5); color: white; padding: 10px; }
.width-b-2 { width: calc(50% - 100px); }
.width-b-3 { width: calc(33% - 100px); }