Rectangular inside circle responsive with contents - html

Question

I'm trying to make rectangular inside the circle on the left , when im resizing the screen of the website the shapes moving out and the texts checking out from the shapes , any ways to make texts and shapes responsive to all screens
The code : https://codepen.io/enespro/pen/rNWmLvP
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="circle">
<h3 class="mt-4">Bzns Monster School<br><span style="font-size: 20px; color: #DDDD;">From Zero To Hero</span></h3>
</div>
<div class='rect-box'>
</div>
<div class='rect-content'>
<div class="content">
<span>Lorem ipsum dolor sit amet, consetetur<br> sadipscing elitr, sed diam nonumy eirmod<br> tempor invidunt ut labore et dolore magna.</span>
</div>
</div>
<button class="btn btn-outline-secondary ml-1">Read More</button>
</div>

Answer 1

I see in your code there's a lot of position absolute that will just drive you crazy in long term to maintain that code. What about using the magic of flex, instead? :)
I rewrote your code here below. Check it clicking on "Run Code Snippet" to see it in action.
I suggest on the mobile to separate the banner from the circle to make it responsive and readable.
Enjoy!
.wrapper {
position: relative;
display: flex;
align-items: center;
min-height: 300px;
flex-direction: column;
}
.circle {
border-radius: 50%;
background-color: #000;
min-width: 200px;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.circle span {
color: #fff;
}
.rectangle {
width: 100%;
padding: 10px;
text-align: center;
background-color: #eee;
}
#media screen and (min-width: 600px) {
.circle {
position: absolute;
}
.rectangle {
padding: 30px 0 30px 220px;
}
.wrapper {
flex-direction: row;
}
}
<div class='wrapper'>
<div class='circle'><span>Lorem Ipsum</span></div>
<div class='rectangle'>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>