JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<div id='container_add_movies'>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>
<div id="footer">
FOOTER
</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container_add_movies {
  width: 100%;
  height: 80%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

#container_add_movies #search {
  display: flex;
  width: 60%;
  background-color: red;
  height: 100%;
  justify-content: center;
  align-items: center;
}

#suggestions {
  display: flex;
  align-self: flex-start;
  /* NEW */
  width: 40%;
  background-color: yellow;
  height: 100%;
  justify-content: center;
  align-items: center;
}

#footer {
  display: flex;
  align-self: flex-start;
  /* NEW */
  width: 100%;
  background-color: yellow;
  height: 20%;
  justify-content: center;
  align-items: center;
}

@media all and (max-width: 900px) {
  #container_add_movies {
    height: 100%;
    flex: 1 100%;
  }

  #container_add_movies #search {
    background-color: blue;
  }

  #search,
  #suggestions {
    flex: 1 100%;
  }
}

JavaScript

/* Flexbox TESTS */