Two CSS boxes in a line

programming web dev
1

Hi!

I have a problem. I have the following situation: two red containers, and in each container two blue boxes, right and left box. In the right box there is more text than in the left one.

This is the code:

<html>
<head>
	<style type="text/css">
		body {
			background-color: black;
			color: white;
		}
		.container {
			background-color: red;
		}
		.left_box {
			background-color: blue;
			width: 100px;
		}
		.right_box {
			background-color: blue;
			width: 100px;
			float: right;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="right_box">
			1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 right_box 1 
		</div>
		<div class="left_box">
			1 left_box 1 left_box 1 left_box 1 left_box 1 left_box 1 left_box 1 left_box 1 left_box 1 left_box 1 left_box 1 left_box
		</div>
	</div>
	
	<br />
	
	<div class="container">
		<div class="right_box">
			2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 right_box 2 
		</div>
		<div class="left_box">
			2 left_box 2 left_box 2 left_box 2 left_box 2 left_box 2 left_box 2 left_box 2 left_box 2 left_box 2 left_box 2 left_box
		</div>
	</div>
</body>
</html>

How can I put the two boxes (the left and the right box) using CSS in a line and in the same time to expand the red container?

With the above code the first right box goes over the second container. How can I expand the red container to match the size of the right box? If I don’t use float they won’t stay in the same line. Can you help me?

Thanks in advance!