JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

HTML

<ul>
  <li><div>A</div></li>
  <li><div>B</div></li>
  <li><div>C</div></li>
  <li><div>D</div></li>
</ul>

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

div {
  background: orange;
  border-radius: 10px;
}

li:nth-child(2) div {
  background: lime;
}

li:nth-child(3) div {
  background: olive;
}

/* desktop only */
@media (min-width: 300px) {
  ul::after {
    display: table;
    clear: both;
    content: '';
  }
  li {
    float: left;
    width: 100%;
    padding: 0 100px 0 0;
    box-sizing: border-box;
  }
  li:nth-child(2) {
    position: relative;
    float: right;
    width: 100px;
    padding: 0;
    margin: 0 0 0 -100px;
  }
}