As a novice in the world of HTML and CSS, I have designed a birthday card with a desired 50/50 split down the center. Placing an image on the left side was successful, however when trying to add text to the right, it ended up too close to the center line. To fix this, I applied some padding (padding-left: 50px;) to shift it further across. The problem arose when the box on the right expanded along with the text. My goal is for the right box to maintain its size while allowing adjustments to the text inside without resizing the box.
.card {
box-sizing: border-box;
width: 600px;
height: 400px;
border: 5px solid;
display: flex;
}
.left {
flex: 1;
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-royalty-free-image-506756303-1560962726.jpg");
border-style: solid;
background-size: cover;
background-position: 60% 5%;
width: auto;
height: auto;
max-width: 300px;
max-height: 600px;
}
.right {
flex: 1;
background-color: burlywood;
border: 5px solid;
padding-left: 50px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Flex</title>
</head>
<body>
<div class="card">
<div class="left">
</div>
<div class="right">
<h1 class="title">Hello</h1>
<h2 class="birthday">Happy Birthday</h2>
<p class="message">We really miss you and are thinking about you</p>
<p class="bye"> Lots of love and see you soon x</p>
</div>
</div>
</body>
</html>