@Janette31230643hhkz,
In order to give more precise answers, we need the related .intro and .column CSS styles, too.
It's unclear from HTML alone if you're working with CSS Flexbox, Grids or old fashioned Floats. The latter could be more problematic than the former two.
An example, with CSS Grids:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.intro {
display: grid;
grid-column-start: col 0;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fit, 1fr);
/**adjust background values to suit**/
background-color:antiquewhite;
opacity:60%;
}
.column img {
vertical-align:middle;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>CSS Grid Test</h2>
<div class="intro">
<div class="column">
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit error repellat voluptas officiis cum. Facilis eum voluptatum eius. </p>
<img src="https://dummyimage.com/650x490>" alt="placeholder">
</div><!--/column-->
<div class="column">
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit error repellat voluptas officiis cum. Facilis eum voluptatum eius. Voluptatum voluptate similique culpa nisi nesciunt inventore eveniet animi, molestias, magnam consequuntur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit error repellat voluptas officiis cum. Facilis eum voluptatum eius. Voluptatum voluptate similique culpa nisi nesciunt inventore eveniet animi, molestias, magnam consequuntur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit error repellat voluptas officiis cum. Facilis eum voluptatum eius. Voluptatum voluptate similique culpa nisi nesciunt inventore eveniet animi, molestias, magnam consequuntur.</p>
</div> <!--/column-->
</div> <!--/intro-->
</body>
</html>
... View more