问题:如何使文本自动收缩并留在容器内?

我是编码新手，在改变浏览器宽度时已经设法使图像自动调整大小，但文本有自己的想法-任何帮助将非常感激!

这是我的HTML:我在容器上有display: flex，使img左边和文本内容在容器内的右边。

<div class="learn-container">
<img class="banner-img" src="resourcesimagesbanner.jpg" alt="">
<div class="learn-content">
<h2>Learn something<br>new everyday</h2>
<p>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit.</p>
<p class="start"><a href="#">Start here</a></p>
</div>
</div>

CSS:

.learn-container {
display: flex; 
background-color: lightgray;
width: 100%;
}
.banner-img {
width: 60%;
height: 100%;
padding: 32px 24px;
}
.learn-content {
font-size: 42px;
align-self: center;
padding: 24px;
margin: 0;
}
.start {
color: white;
background-color: rgb(71, 71, 71);
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
font-size: 36px;
width: 60%;
}