JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="maps">
                <div id="mapid" class="map"></div> 
                <div class="drom_maps">
                  <div id="map_regions_antilles" class="drom_map"></div>
                  <div id="map_regions_guyane" class="drom_map"></div>
                  <div id="map_regions_mayotte" class="drom_map"></div>
                  <div id="map_regions_reunion" class="drom_map"></div>
                </div>
            </div>

CSS

.maps {
  border: 1px solid black;
}

.map {
  min-height: 40em;
  min-width: 35%;
  border-right: 2px solid var(--theme-background-grey);
}
#mapid{
  width: 450px;
  height: 400px;
  border: 1px solid red;
}
#map_regions_antilles{
  width: 150px;
  height: 50%;
}

#map_regions_guyane{
  width: 150px;
  height: 50%;
}

#map_regions_mayotte{
  width: 150px;
  height: 50%;
}

#map_regions_reunion{
  width: 150 px;
  height: 50%;
}
.maps{
  display:flex;
}

.drom_maps{
  display:flex;
  flex-wrap: nowrap;
  padding-left :0.5%;
  border: 1px solid red;
}
.drom_map {
  border: 1px solid blue;
}