JSFiddle - React, Tailwind, and code Playground

by kairavthakar2016

HTML

<div id="flexbox">
  <div id="item1">Flex item 1 with quite some content</div>
  <div id="item2">Flex item 2</div>
</div>

<button style="margin-top: 30px">Toggle shrink container</button>

CSS

#flexbox {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border: 2px solid #397298;
}

#flexbox>div {
  background: #8bc6e3;
  padding: 20px;
}

#item2 {
  margin: auto;
}

#flexbox.wrapped #item2
{
  margin-left: 0px;
}

JavaScript

// Not relevant for the question - toggle container width
document.querySelector('button').addEventListener('click', () => {
  const flexbox = document.querySelector('#flexbox');
  flexbox.classList.toggle("wrapped")
  if (flexbox.style.maxWidth) {
    flexbox.style.maxWidth = null;
  } else {
    flexbox.style.maxWidth = '300px';
  }
});