JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<section class="whatever-main-area-etc">

  <aside class="sidebar">
    <input type="search" placeholder="Find  a repository">
  </aside>

  <main>
    main stuffs
  </main>

</section>

CSS

.whatever-main-area-etc {
  display: flex;
  flex-direction: column;
}

.sidebar {
  border: 1px solid blue;
  padding: 10px;
}

input[type='search'] {
  display: block; /* inline by default */
  width: 100%; /* allow this to just 'work' based on parent context */
  padding: 5px 10px;
  font-style: innherit;
}

main {
  border: 1px solid red;
  padding: 10px
}

@media (min-width: 700px) { /* when window is bigger than 700px */
  .whatever-main-area-etc {
    flex-direction: row;
  }
  
  .sidebar {
    flex-basis: 300px; /* try to be this side - if at all possible */
  }
  
  main {
    flex-grow: 1; /* true (let it stretch to fill the space) */
  }
}