JSFiddle - React, Tailwind, and code Playground

by Donlee Malacad

HTML

<div class="wrap">
    <div class="image">img</div>
    <div class="info">info</div>
</div>

CSS

.wrap {
    background: gray;
    overflow: hidden;
    height: 1em;
}


.image {
    background-color: gray;
    float: left;
    width: 140px;
    border-right: 2px solid #000;
}

.info {
    background-color: green;
    overflow: hidden;
    border: 2px solid #ccc;
    float: right;
}

@media only screen and (max-width:600px) {
    .image, .info {
        width: 100%;
        display: block;
    }
}

@media screen and (max-width: 400px) {
   #one {
    float: none;
    margin-right: 0;
    width: auto;
    border: 0;
    border-bottom: 2px solid #000;
  }
}