JSFiddle - React, Tailwind, and code Playground

HTML

<section id='wide'>
<div class='wrap'>
<div class='inlineblock'></div>
<div class='inlineblock'></div>

</div>

</section>

<p>
When the red inline-blocks are forced to line break, how do you make a parent with display:inline-block (the green border) snap to fit? How do you get rid of all the extra horiztonal space in the lower green bordered div?

</p>

<section id='narrow'>
<div class='wrap'>
<div class='inlineblock'></div>
<div class='inlineblock'></div>

</div>

</section>

CSS

#wide{
  position:relative;
  width:100%;
  border:1px solid black;
  padding:5px;
}
#narrow{
   position:relative;
  width:175px;
  border:1px solid black;
  padding:5px;
}
.wrap{
  display:inline-block;
  border:1px solid green;
  margin:auto;
}
.inlineblock{
  display:inline-block;
  vertical-align:top;
  background:red;
  min-width:100px;
  min-height:100px;
  border:1px solid black;
}