JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<div class="desktop">
  <div class="yellow">lorem</div>
  <div class="orange">dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt </div>
  <div class="purple">lorem</div>
  <div class="green">lorem</div>

</div>

CSS

* {
  box-sizing: border-box;
}
main,
div {
  display: flex;
  padding: 1rem;
}

.desktop {
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
}

div {
  flex: 1;
}

div.orange {
  background-color: #FFAD77;
  width: 30%;
  flex: 0 0 50%;
}

div.yellow {
  flex: 0 0 100%;
  width: 40%;
  background-color: #FFE377;
}

div.purple {
    flex: 0 0 50%;

  width: 30%;
  background-color: #FF77C8;
}
div.green{
  background-color: green;
  width:30%;
}

@media(max-width: 480px) {
  .desktop div {
    flex: 1;
    width: 100%;
  }
  div[orange] {
    order: -1;
    flex: 2;
  }
  div[yellow] {
    flex: 5;
  }
  div[purple] {
    flex: 1;
  }
  div[purple] {
    flex: 6;
  }
}