Not sure using the w3schools css would be the best approach, but to answer your question, you’d need to add the following:
.w3-show {
display: flex !important;
align-items: flex-end;
flex-direction: column;
margin-right: -16px; /* this is a magic number so buyer beware */
width: 100%;
}
.w3-show > p { width: 100%;}
You can’t nest block elements inside button elements as that is invalid. Only phrasing content is allowed which basically means inline elements such as span etc.
You don’t need the h4 inside the button anyway as you can style the text as you like. (Or alternatively don’t use the button but apply the styles and script to the h4 on its own.Or put the button inside the heading tag.)