JSFiddle - React, Tailwind, and code Playground

by Casufi

HTML

<div>
  <div id="top-wrapper">
  </div>
  <div id="side-wrapper">
  </div>
  <div id="gallery-wrapper">
    <div id="gallery-images">
      <form id="gallery-images2">
        <img src="http://placehold.it/150?text=1" />
        <img src="http://placehold.it/150?text=2" />
        <img src="http://placehold.it/150?text=3" />
    </form>
  </div>
</div>
</div>

CSS

#top-wrapper {
  height: 50px;  
  width: 100%;
  background-color: red;
}

#side-wrapper {
  height: 900px;  
  width: 120px;
  background-color: #000;
  float: left;
}
#gallery-wrapper {
  width: calc(100% - 120px);
  height: 900px;
  overflow: hidden;
  padding-top: 1.5em;
  background-color: #ccc;
}

#gallery-images {
  position: relative;
  height: 100%;
  padding: 1em;
  background-color: #eee;
}

#gallery-images2 {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  height: 170px;
  min-width: 100%;
  overflow-x: auto;
  overflow-y: none;
  position: relative;
  background-color: #ddd;
  padding: 5px;
}

#gallery-images2 img {
  display: block;
  flex-shrink: 1;
  height: 100%;
  width: auto;
  margin: 2px;
}