How to make text + button responsive - html

Question

I wanna have the button under the text if the pixel width of the screen is <= 664px. If it's unclear what I mean, here is an image link to image - I hope this helps.
Basically I want to make it responsive. I tried some things but nothing worked. Has someone a idea?
.main {
flex: 63%;
background-color: white;
}
.main-box {
background-color: #ffffff;
height: 130px;
display: table;
width: 798px;
border-right: solid;
border-left: solid;
border-bottom: solid;
border-color: #E6E6E6;
}
.text-in-main-box{
font-weight: bold;
font-family: rob;
width: 60%;
padding: 7%;
display: table-cell;
vertical-align: middle;
}
.container-for-button-in-main-box{
width: 40%;
display: table-cell;
vertical-align: middle;
height: 100%;
}
.button-in-main-box{
display:inline-block;
padding:0.8em 1.2em;
margin:0 0.3em 0.3em 0;
border-radius:4em;
box-sizing: border-box;
text-decoration:none;
font-family:rob;
font-weight:bold;
color:#ffffff;
background-color:#34E034;
text-align:center;
transition: all 0.2s;
}
.button-in-main-box:hover{
transform: scale(1.1);
}
<div class="main-box">
<div class="text-in-main-box">Sage “Hallo, Welt" mit Python</div>
<div class="container-for-button-in-main-box"><span class = button-in-main-box>Löse Aufgabe</span></div>
</div>

Answer 1

Go for media-query #media only screen and (max-width: 664px)
.main {
flex: 63%;
background-color: white;
}
.main-box {
background-color: #ffffff;
height: 130px;
display: table;
width: 798px;
border-right: solid;
border-left: solid;
border-bottom: solid;
border-color: #E6E6E6;
}
.text-in-main-box {
font-weight: bold;
font-family: rob;
width: 60%;
padding: 7%;
display: table-cell;
vertical-align: middle;
}
.container-for-button-in-main-box {
width: 40%;
display: table-cell;
vertical-align: middle;
height: 100%;
}
.button-in-main-box {
display: inline-block;
padding: 0.8em 1.2em;
margin: 0 0.3em 0.3em 0;
border-radius: 4em;
box-sizing: border-box;
text-decoration: none;
font-family: rob;
font-weight: bold;
color: #ffffff;
background-color: #34E034;
text-align: center;
transition: all 0.2s;
}
.button-in-main-box:hover {
transform: scale(1.1);
}
#media only screen and (max-width: 664px) {
.main-box {
width: 100%;
max-width: 798px;
display: flex;
flex-direction: column;
height: auto;
}
.text-in-main-box {
width: 100%
padding: 7% 0;
text-align: center;
}
.container-for-button-in-main-box {
width: 100%;
display: flex;
justify-content: center;
}
}
<div class="main-box">
<div class="text-in-main-box">Sage “Hallo, Welt" mit Python</div>
<div class="container-for-button-in-main-box"><span class=button-in-main-box>Löse Aufgabe</span></div>
</div>
Complete flex implementation for your solution will be something like below.
.main-box {
background-color: #ffffff;
height: 130px;
display: flex;
width: 798px;
border-right: solid;
border-left: solid;
border-bottom: solid;
border-color: #E6E6E6;
}
.text-in-main-box {
font-weight: bold;
font-family: rob;
width: 60%;
padding: 7%;
display: flex;
vertical-align: middle;
}
.container-for-button-in-main-box {
width: 40%;
display: flex;
vertical-align: middle;
/* height: 100%; */
flex-direction: column;
align-items: center;
justify-content: center;
}
.button-in-main-box {
display: inline-block;
padding: 0.8em 1.2em;
margin: 0 0.3em 0.3em 0;
border-radius: 4em;
box-sizing: border-box;
text-decoration: none;
font-family: rob;
font-weight: bold;
color: #ffffff;
background-color: #34E034;
text-align: center;
transition: all 0.2s;
}
.button-in-main-box:hover {
transform: scale(1.1);
}
#media only screen and (max-width: 664px) {
.main-box {
width: 100%;
max-width: 798px;
display: flex;
flex-direction: column;
height: auto;
}
.text-in-main-box {
width: 100%;
padding: 7% 0;
justify-content: center;
}
.container-for-button-in-main-box {
width: 100%;
display: flex;
justify-content: center;
}
}
<div class="main-box">
<div class="text-in-main-box">Sage “Hallo, Welt" mit Python</div>
<div class="container-for-button-in-main-box"><span class=button-in-main-box>Löse Aufgabe</span></div>
</div>

Answer 2

Use #media query for it. Using it you can apply custom css properties to your site when a certain condidion is true (in your example max-width: 664px)
Heres a tutorial on it:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Example:
#media screen and (max-width: 664px) {
.button-in-main-box{
background-color: green;
}
}

Answer 3

You are closing the div for text before the button. Please use this code & do adjustments as you want.
<div class="main-box">
<div class="text-in-main-box">Sage “Hallo, Welt" mit Python
<div class="container-for-button-in-main-box"><span class = button-in-main-box>Löse Aufgabe</span></div>
</div>
</div>