JSFiddle - React, Tailwind, and code Playground

by Rishi Gautam

HTML

<div class='main'>
  <div class='header'>
  header
  </div>
  <div class='header2'>
  
  </div>
</div>

CSS

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #ccc;
  height: 200px;
}

.header {
  height: 80px;
  /* width: 100%; */
  background-color:red;
  flex: 2;
}

.header2 {
  flex: 1;
  background-color: blue;
  height: 80px;
}

.btn {
  
  width: 100px;
  height: 50px;
  text-align: center;
  background-color: #ddd;
}