CSS Grid + Flexbox to create new layout for mobile - css

Question

I might or might not need flexbox for this issue, but I'm still learning and trying to understand how I can get the title to be on top of the add button, which should fill about 96% of the row's width under the title.
I created a stackblitz to demonstrate current code. Also the desktop version should allow title and add button to occupy same row at 70% 30% grid like in stackblitz demo.
This is the desired result when you collapse the browser window to mobile
html
<div class="listingBody">
<div class="listingParent">
<div class="listingCard">
<div class="topRow">
<span id="title">title</span><span
id="addButtonSpan">
<button id="addButton" type="button">
Add Button</button>
</span>
</div>
</div>
</div>
</div>
css
#title {
text-align:center;
}
.topRow {
display: grid;
grid-template-columns: 70% 30%;
}

Answer 1

This is how I would go about it using just flexbox not css grid.
I use a media query to do the mobile stacked layout with flex-direction: column
.topRow {
display: flex;
}
.topRow #title {
width: 70%;
}
.topRow #addButtonSpan {
width: 30%;
}
#media only screen and (max-width: 600px) {
.topRow {
flex-direction: column;
}
.topRow span {
margin: 0 auto;
text-align: center;
}
.topRow #title {
width: 96%;
}
.topRow #addButtonSpan {
width: 96%;
}
}
<div class="listingBody">
<div class="listingParent">
<div class="listingCard">
<div class="topRow">
<span id="title">title</span>
<span id="addButtonSpan">
<button id="addButton" type="button">
Add Button
</button>
</span>
</div>
</div>
</div>
</div>