Arrangement of images and descriptions

HTML/CSS
1

Hey there,

my goal is to write a catalogue with images and descriptions. The images should appear on the left, the descriptions on the right. In the times of HTML 4, I would have used a table. But I have learned that you shouldn’t do this in HTML 5. So I used figures with figcaptions to display the content. The result is not what I wanted to get: The images are sorted in a clockwise arrengement, and the last of the four images appears to be dissociated from the rest.

The fact that HTMNL is completing the rows first rather than the columns is not bad. I am fine with that, but would like to know how to control it.

But most importantly, what changes in the code are needed to make it appear like a table, so that one element (iamge + description) doesn’t dissociate from the rest?

My Code:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, inital-scale=1.0">
		<meta name="keywords" content="Flight Simulation, Sabena, aviation, airplanes">
		<title>Spirit of Sabena</title>
		<link rel="stylesheet" href="css/normalize.css"/>
		<link rel="stylesheet" href="css/styles.css"/>

		<style>
			img {
				width: 500px;
				border-radius: 10px;
				margin-right: 10px;
			}
			figure {
				float: left;
			}
		</style>
	</head>
	<body>		
		<section>
			<h1>Spirit of Sabena</h1>
			<h2 id="section-intro">Fleet</h2>

			<p>The screenshots posted on this website show content from <a href="http://www.x-plane.com" target="_blank">x-plane</a>, a flight simulator published by Laminar Research. Additionally, I show Add-On aircraft, liveries and scenery. Some of them can be purchased at <a href="https://store.x-plane.org" target="new">x-plane.org</a>, some can be downloaded as freeware.</p>

			<figure>
			<img src="images/sabena_b721_close.jpg" alt="FlyJSim Boeing 727-100 in Brussels, livery created by Atarium.">
			<figcaption>Boeing 727-100, Registration OO-STE, in Brussels. Aircraft model: FlyJSim. <a href="https://forums.x-plane.org/index.php?/files/file/46680-sabena-old-flyjsim-b727-100-v3/" target="new">Livery by Atarium.</a></figcaption>
			</figure>

			<figure>
			<img src="images/sab_b732_ebbr.jpg" alt="FlyJSim Boeing 737-200 in Brussels, livery created by Atarium.">
			<figcaption>Boeing 727-100, Registration OO-STE, in Brussels. Aircraft model: FlyJSim. <a href="https://forums.x-plane.org/index.php?/files/file/57206-sabena-billboard-oo-sdd-for-732-twinjet-v3-pro-by-flyjsim/" target="new">Livery by amo63.</a></figcaption>
			</figure>

			<figure>
			<img src="images/sab_a321_llbg_web.jpg" alt="ToLiss Airbus A321-200 in Tel-Aviv, livery created by flightsimulationfsx.">

			<figcaption>Airbus A321-200, Registration OO-SUA, in Tel-Aviv. Aircraft model: ToLiss. <a href="https://forums.x-plane.org/index.php?/files/file/61292-toliss-a321-sabena-last-livery/" target="new">Livery by flightsimulationfsx.</a></figcaption>
			</figure>

			<figure>
			<img src="images/sabena_a332.jpg" alt="JARDesign Airbus A330-200 in Brussels, livery created by KLMflyer.">

			<figcaption>Airbus A330-200, Registration OO-SOO, in Brussels. Aircraft model: JARDesign. <a href="https://forums.x-plane.org/index.php?/files/file/61292-toliss-a321-sabena-last-livery/" target="new">Livery by flightsimulationfsx.</a></figcaption>
			</figure>
		</section>
	</body>
</html>
![screenshot.PNG|690x353](upload://7A72tqS9H34f7lzkrD6EsgqyffT.jpeg)

Thank you very much for helping me out!