JSFiddle - React, Tailwind, and code Playground

by Alexandr Loginov

HTML

<div class="main">
    <div class="left">Лево</div>
    <div class="right">Право</div>
</div>

CSS

.main {
    /*border: 1px solid #000;*/
    /*overflow: hidden;*/
}

.left {
    float: left;
    background: red;
    width: 100%;
}

.right {
    background: blue;
    width: 100px;
    float: left;
    margin-left: -100px;
}

 @media only screen and (min-width: 100px) and (max-width: 500px) {
     .left {
         float: none;
    }
    .right {
        margin: 0;
    }
        
 }