JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div class="section heading">
    <div class="col table_1_of_5">Controls</div>
    <div class="col table_2_of_5">Room / Type</div>
    <div class="col table_1_of_5">Capacity</div>
    <div class="col table_2_of_5">Description / Features</div>
    <div class="col table_2_of_5">Photos</div>
    <div class="clear"></div>
</div>
<br />
<div class="section bottom">
    <div class="mobile-heading">Controls</div>
    <div class="col table_1_of_5">Edit
        <br />Clone
        <br />Delete</div>
    <div class="mobile-heading">Room / Type</div>
    <div class="col table_2_of_5">Room 1 Sudio King</div>
    <div class="mobile-heading">Capacity</div>
    <div class="col table_1_of_5">2</div>
    <div class="mobile-heading">Description / Features</div>
    <div class="col table_2_of_5">Cooking Facilities
        <br />Shower
        <br />Tea / Coffee Making
        <br />Radio / Stereo
        <br />Iron / Ironing Board
        <br />TV
        <br />Hairdryer
        <br />Ensuite Bathroom</div>
     <div class="mobile-heading">Photos</div>
    <div class="col table_2_of_5">5</div>
    <div class="clear"></div>
</div>
<br />
<div class="section bottom">
    <div class="col table_1_of_5">Edit
        <br />Clone
        <br />Delete</div>
    <div class="col table_2_of_5">Room 1 Sudio King</div>
    <div class="col table_1_of_5">2</div>
    <div class="col table_2_of_5">Cooking Facilities
        <br />Shower
        <br />Tea / Coffee Making
        <br />Radio / Stereo
        <br />Iron / Ironing Board
        <br />TV
        <br />Hairdryer
        <br />Ensuite Bathroom</div>
    <div class="col table_2_of_5">5</div>
    <div class="clear"></div>
</div>

CSS

.clear {
    clear:both;
}
.section {
    margin: 0px auto;
    width:100%;
}
.table_1_of_5 {
    width: 13%;
    background-color: #e8e8e8;
}
.table_2_of_5 {
    width: 19%;
    background-color: #e8e8e8;
}
.heading { background-color: #e8e8e8; }

.col:first-child {
    margin-left: 0;
}
.col {
    display: block;
    float: left;
    margin: 0 0 0 3%;
}

.mobile-heading { background-color: #ccc; display: none; }

@media screen and (max-width:480px){
.mobile-heading { display:block; width:100%; }
    
    .heading { display:block; width:100%; }


    .col {
    display: block;
    float: left;
    margin: 0 0 0 0%;
}
    .table_1_of_5 {
    width: 100%;
    background-color: #e8e8e8;
}
.table_2_of_5 {
    width: 100%;
    background-color: #e8e8e8;
}

    
    
}