SOURCE

<div class="container-1">
		<div class="left-1"></div>
		<div class="right-1"></div>
	</div>
	<div class="container-2">
		<div class="left-2"></div>
		<div class="center-2"></div>
		<div class="right-2"></div>
	</div>
	<div class="container-3">
		<div class="left-3"></div>
		<div class="right-3"></div>
	</div>
	<div class="container-4">
		<div class="left-4"></div>
		<div class="center-4"></div>
		<div class="right-4"></div>
	</div>

.container-1 {
			display: flex;
			margin-bottom: 10px;
		}
		.left-1 {
			height: 30px;
			margin-right: 5px;
			flex: 1;
			background-color: red;
		}
		.right-1 {
			width: 30px;
			height: 30px;
			background-color: black;
		}
		.container-2 {
			display: flex;
            min-width: 60px;
		}
		.left-2 {
			width: 30px;
			height: 30px;
			background-color: green;
		}
		.center-2 {
			height: 30px;
			margin: 0 5px;
			flex: 1;
			background-color: yellow;
		}
		.right-2 {
			width: 30px;
			height: 30px;
			background-color: pink;
		}