JSFiddle - React, Tailwind, and code Playground

by moojjoo

HTML

<div class="container">
    <div id="left">This is my left outer div</div>
    <div id="middle">This is my middle div</div>
    <div id="right">This is my right outer div</div>
</div>

CSS

.container {
    width:100%;
}
#left {
    width:33%;
    float:left;
}
#middle {
    width:33%;
    float:left;
}
#right {
    width:33%;
    float:left;
}
@media screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
    #left {
        visibility:hidden;
    }
    #middle {
        width:100%;
        float:left;
    }
    #right {
        visibility:hidden
    }
}