On my footer, I have some text at the top, then 2 divs that are supposed to be side by side, and another div at the bottom, centered. The 2 divs always show up one above the other, on the left side of the screen, instead of side by side.
.footer { background-color: #f9e3ef; width: 100vw; height: auto; text-decoration: none; font-size: 2.2vw; color: #000000; font-family: "Open Sans", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100; text-align: center; padding: 0.5vw; order: 5; margin-top: auto; text-align: center;}.footer.text.parent { flex-direction: row; justify-content: space-around; width: 100vw; height: auto;}.footer.text { color: #000000; text-align: center; text-decoration: underline black; font-size: 2.0vw; width: 50vw; order: 6;}.footer.text a { color: #000000; text-align: center; text-decoration: none;}.footer.end { text-align: center; font-size: 1.8vw; width: 100vw; height: auto; order: 8;}.footer.end a { color: #000000; text-align: center; text-decoration: none; font-size: 1.8vw;}<div class="footer"> Contact us!<br><div class="footer text parent"><div class="footer text"> Email:<br> Address:<br></div><div class="footer text"><a href="" target="_blank">Link to Vendor Form</a><br><a href="" target="_blank">Link to Donation Form</a><br><a href="events.html">Link to Event list</a></div></div><div class="footer end"><br>Photos of the event by<br><a href="" target="_blank">Website by</a></div></div>I've tried to remove the "footer text parent" div and use style only on the "footer" div to see if that would work, I've tried to make the "footer text" divs smaller width, I've tried using style="order:" on each div separately.