Struggling with a design issue on my desktop-first responsive webpage for the past few days. I'm trying to create a layout where a paragraph element and an image element are displayed side-by-side, emulating one cohesive item. The paragraph should take up 30% of the container and the image 70%, with border-radius applied to the paragraph's left top/left bottom corners and the image's right top/right bottom corners. However, due to varying screen sizes, achieving equal height for both elements is proving to be a challenge. When resizing beyond a certain point, the height of these elements fluctuates.
My initial plan was to maintain equal height until the 1024px breakpoint, where they would revert back to block elements. But given the dynamic nature of the paragraph's resizing, I'm unsure if this approach is feasible. Any suggestions on improving the presentation of these elements would be greatly appreciated. I might have approached this concept incorrectly, so any guidance or assistance in resolving this matter would be immensely helpful. I've exhausted all my efforts over the last couple of days without success!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link href="./style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<section class="home-main">
<p class="main-para">aliquip sunt aut efflorescere fore praesentibus tamen quae eram officia
illustriora est tempor o id quis adipisicing appellat sed multos ea lorem
sempiternum qui doctrina ab dolor senserit tractavissent an probant
instituendarum elit culpa qui magna tempor aliquip quamquam minim voluptate
legam arbitrantur graviterque eu</p>
<img class="main-image" src="http://placehold.it/300x200">
</section>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Arial;
text-align: center;
}
.container {
width: 95%;
max-width: 80%;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 0;
}
/* HOME-MAIN
============================================= */
@media (min-width: 1024px) {
.main-para {
float: left;
width: 40%;
background-color: #000;
color: #fff;
line-height: 1.5em;
font-size: 1.4em;
padding: 2em 1em 2.15em;
margin: 0 0 1em;
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
.main-image {
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
float: right;
width: 60%;
}
}