Two Column Layout in CSS Flex

by jay prakash

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Flex Two Column Layout</title>
	<link rel="stylesheet" href="styles.css" />
</head>
<body>
	<!-- Flex container wrapping both columns -->
	<div class="flex-container">
		<!-- Left column for image and title -->
		<div class="flex-left">
			<h2>Image Title</h2>
			<p><img src="https://github.com/Templarian/MaterialDesign/raw/master/svg/camera.svg" width="100" height="100" alt="Camera Icon" />
</p>
		</div>
		<!-- Right column for text content -->
		<div class="flex-right">
			<h2>Right Column</h2>
			<p>Right Column text content goes here.</p>
		</div>
	</div>
</body>
</html>

CSS

/* Container for the two columns */
.flex-container {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	gap: 50px;
	justify-content: space-between;
	padding: 30px;
}

/* Common styles for both left and right columns */
.flex-left,
.flex-right {
	box-sizing: border-box;
	flex: 0 0 auto;
	padding: 20px;
	width: calc(50% - 20px);
}

/* Left column specific styling */
.flex-left {
	border: 2px solid blue;
}

/* Right column specific styling */
.flex-right {
	border: 2px solid deeppink;
}

/* Medium screen adjustments (tablets, small laptops) */
@media (max-width: 1199px) {
	.flex-container {
		gap: 20px;
		padding: 20px;
	}
}

/* Small screen adjustments (mobile phones) */
@media (max-width: 767px) {
	.flex-container {
		flex-direction: column;
		gap: 20px;
		padding: 10px;
	}

	.flex-left,
	.flex-right {
		font-size: 16px;
		padding: 15px;
		width: 100%;
	}
}