Example

by Ishank Dubey

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex -->

<div id="flex-container">
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>

CSS

#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {

  display:block;
}

#flex-container > .raw-item {
  width: 5rem;
}

JavaScript

var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
  raw.style.display = raw.style.display == "none" ? "block" : "none";
});