JSFiddle - React, Tailwind, and code Playground

by dingen2010

HTML

<div class="header">
  <div class="col">
    <img src="http://placehold.it/100x30/?text=logo" />    
  </div><div class="col">
  <img src="http://placehold.it/30x30" />    
  <img src="http://placehold.it/30x30" />    
  <img src="http://placehold.it/30x30" />    
  <img src="http://placehold.it/30x30" />    
  </div><div class="col">
  <img src="http://placehold.it/60x30/?text=cart butt" />    
  </div>
</div>


<div class="container">
  <div class="row">
    <img src="http://lorempixel.com/150/100/sports" />
    <span> Some text ... being aligned at the top</span>
  </div>
  <div class="row">
    <img src="http://lorempixel.com/150/100/city" />
    <span> Some text ... being aligned at the top</span>
  </div>
</div>

CSS

html, body {
  margin: 0
}

.header {
  min-width: 380px;
  padding: 10px;
  border-bottom: 1px solid #999;
}

.container {
  padding: 10px;
  white-space: nowrap;
}

.header .col {
  display: inline-block;
  width: 33%;
}
.header .col:nth-child(2) {
  text-align: center
}
.header .col:nth-child(3) {
  text-align: right
}

.header .col:nth-child(1) img {
  width: 100%;
  height: 30px;
}

.container .row {
  margin-bottom: 10px;
}

.container .row span {
  margin-left: 10px;
  vertical-align: top;
}


@media (max-width: 660px){

  .header .col:nth-child(1) {
    display: block;
    width: auto;
  }

  .header .col:nth-child(2) {
    text-align: left;
    width: 50%;
  }

  .header .col:nth-child(3) {
    width: 50%;
  }

  .header .col:nth-child(2) img {
    width: 20%;
    height: 30px;
  }

}

@media (max-width: 440px){

  .header .col:nth-child(1),
  .header .col:nth-child(2),
  .header .col:nth-child(3) {
    display: block;
    width: auto;
    text-align: left
  }

  .header .col:nth-child(2) img {
    width: 24%;
  }

  .container .row span {
    display: block;
    margin-left: 0;
    margin-top: 10px;
  }

}