JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<!-- This column will be 25% wide -->
	<div class="col-1">This column will be 25% wide</div>
	<!-- This column will be 50% wide -->
	<div class="col-2">This column will be 50% wide</div>
	<!-- This column will be 25% wide -->
	<div class="col-1">This column will be 25% wide</div>
</div>

CSS

.container {
        /* Initialize the flex model */
	display: flex;
        /* These are the default values but you can set them anyway */
	flex-direction: row;    /* Items inside the container will be positioned horizontally */
  align-items: stretch;   /* Items inside the container will take up it's entire height */
  /* Center according to the main axis */
    justify-content: center;
    /* Center according to the secondary axis */
    align-items: center;
}
.container div{
  max-width: 100px;
  background: #eaeaea;
  margin: 10px;
  padding: 10px;
}

.col-1{
	flex: 1;
}

.col-2{
	flex: 2;
}

@media (max-width: 800px){
	.container{
		/* Turn the horizontal layout into a vertical one. */
		flex-direction: column;		
	}
}