How to Create LEFT-RIGHT Alignment of Containers with CSS Flex

A two-column layout, where the first item is aligned to the left, and the second item is aligned to the extreme right, can be created easily using CSS flexbox.

The trick is to set justify-content: space-between for the main flex container, so that space remaining is set between the two flex items.

Example

HTML & CSS

<div id="parent">
	<div class="child">Left Container</div>
	<div class="child">Right Container</div>
</div>

#parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}