JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div id="ex1" class="example">
  <div></div>
  <div></div>
</div>

<div id="ex2" class="example">
  <div></div>
  <div></div>
</div>

<div id="ex3" class="example">
  <div></div>
  <div></div>
</div>

CSS

.example { margin: 10px ; padding: 10px ; background-color: #f7f7f7 ; }
.example:after { display: block ; content: "" ; clear: both ; }
.example > div { width: 50px ; height: 50px ; background-color: lightblue ; }

/* Example 1 */
#ex1 > div:first-child { }
#ex1 > div:last-child { float: right ; }

/* Example 2 */
#ex2 > div:first-child { float: left ; }
#ex2 > div:last-child { float: right ; }

/* Example 3 */
#ex3 > div:first-child { display: inline-block ; }
#ex3 > div:last-child { float: right ; }