JSFiddle - React, Tailwind, and code Playground

by jwerre

HTML

<main>
  <div class="parent">
  	
    <section class="child">
      <hgroup>
        <h2>
          Child number one.
        </h2>
		<p>Nullam eget nibh mollis, ultrices lorem non, luctus odio. Pellentesque ornare magna ut elementum ornare. Phasellus vulputate quam eget augue euismod feugiat. Quisque porta justo vel mi facilisis vestibulum. Mauris id mauris id nulla varius volutpat.</p>
      </hgroup>
    </section>


    <section class="child">
      <hgroup>
        <h2>
          Child number 2.
        </h2>
		<p>Nullam eget nibh mollis, ultrices lorem non, luctus odio. Pellentesque ornare magna ut elementum ornare. Phasellus vulputate quam eget augue euismod feugiat. Quisque porta justo vel mi facilisis vestibulum. Mauris id mauris id nulla varius volutpat.</p>
      </hgroup>
    </section>


  </div>
</main>

CSS

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

main {
	width: 100vw;
	height: 100vh;
	background-color: red;
	padding: 50px;
}


.parent {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;
	/* overflow-x: hidden; */
	background-color: pink;
}


.child {
	background-color: crimson;
	padding: 10px;
	/* flex-basis: 25%; */
	/* width: 100vw; */
	/* min-width: 300px; */
	max-width: 500px;

}


.child:first-child {
	background-color: green;
	/* transform: translateX(-110%); */
}

.child:last-child {
	background-color: limegreen;
	/* transform: translateX(500%); */
}