JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<div class="bx"></div>
<div class="bx move-it"></div>
<div class="bx"></div>
</div>
CSS
body {
padding: 0;
margin: 0;
}
.wrapper {
background: #000;
display: flex;
align-items: center;
justify-content: space-between;
}
.bx {
height: 20px;
width: 20px;
background: red;
}
.wrapper > div:first-child {
width: 300px;
}
.wrapper > div:nth-child(2) {
background: pink;
}
/*.move-it {
background: pink;
margin-right: auto;
margin-left: auto;
}*/