JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
    </div>
    <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
    </div>
    <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
    </div>
    <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
    </div>
    <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
    </div>
    <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
    </div>
    <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
    </div>
    <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
    </div>
    <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
    </div>
    <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
    </div>
    <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
    </div>
    <div class="post-text">
    <div>
    some text some text some text some text some text some text some text
    </div>
    </div>
</div>

CSS

.container {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid red;
}

.post-image {
  display: inline-block;
  vertical-align: top;
}

.post-text {
  display: inline-block;
  vertical-align: top;
  max-width: 100px;
  width: 100%;
  white-space: normal;
}