The mobile-first code below works fine when both columns 1 & 2 content is text but when column 2 is an image the width of both column changes in a non-proportional way that is not 50% 50% when zooming in or out and even without zooming.
<style>
.container__one {
display: block;
}
@media only screen and (min-width: 1024px) {
.container__one {
display: flex;
}
}
.column__one,
.column__two {
width: 100%;
padding: 10px;
}
.column__one > h1 {
font-size: 4em;
}
.column__one > p {
font-size: 2em;
}
.column__two > img {
background-size: cover
}
</style>
</head>
<body>
<div class="container__one">
<div class="column__one">
<h1>Title 1 </h1>
<p>Democratic presidential candidate Joe Biden has attacked
President Donald Trump over a report that he said, if true,
contains a "truly shocking revelation" about the commander
in chief and his failure to protect US troops in Afghanistan
and stand up to Russia. You'll want to serve WebP images only
to clients that can display them properly, and fall back to legacy
formats for clients that can't.</p>
</div>
<div class="column__two">
<img src="showcase.jpg" width="" height="" alt="Table in a restaurant">
<!-- <h1>Title 2 </h1>
<p>Democratic presidential candidate Joe Biden has attacked
President Donald Trump over a report that he said, if true,
contains a "truly shocking revelation" about the commander
in chief and his failure to protect US troops in Afghanistan
and stand up to Russia. You'll want to serve WebP images only
to clients that can display them properly, and fall back to legacy
formats for clients that can't.</p> -->
</div>
</div>
<script src="js/scripts.js"></script>
</body>
Here are 2 pictures that shows the issue:
How to fix this?
That is 2 columns one text & one image, both column on desktop screen 50% 50%.