JSFiddle - React, Tailwind, and code Playground

by Gleb Kemarsky

HTML

<div class="grid">
  <div class="container">
    <div class="intermediate">
      <div class="content">Narrow content is centered horizontally</div>
    </div>
  </div>

  <div class="container">
    <div class="intermediate">
      <div class="content wide">Narrow content is centered horizontally</div>
    </div>
  </div>

  <div class="container">
    <div class="intermediate">
      <div class="content high">Wide content starts from the left edge</div>
    </div>
  </div>

  <div class="container">
    <div class="intermediate">
      <div class="content wide high">Wide content starts from the left edge</div>
    </div>
  </div>
</div>

CSS

.container {
  border: 2px solid red;
  display: flex;
  height: 250px;
  overflow: auto;
}

.intermediate {
  display: flex;
  flex-grow: 1;
  justify-content: center;
}

.content {
  border: 2px solid blue;
  height: 150px;
  margin: 12px;
  width: 150px;
}

.content.high {
  height: 600px;
}

.content.wide {
  width: 900px;
}

@media (min-width: 500px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

body {
  margin: 0;
}