How can I place form fields inline with text? - css

Question

I'm trying to put the mailing list button on the right side of the address. I am just starting out and this has frustrated me for many days. I have been learning using the W3 school but can't quite work out how to move it. At first I was using divs but then learned more about the span element. I thought that would fix it but alas, I need help.
Just to make sure I understood, I am trying to have the mailing list button and input to the right hand of the "Visit our warehouse" text rather than have it below.
<span>
Visit our wholesale warehouse<br>
7507 Kingspointe Parkway<br>
Suite 101<br>
Orlando, FL. 32819<br>
US<br>
Phone: 407-420-<br>Directions
</span>
<!--START: FRAME_MAILLIST-->
<span class='container'>
<span class='fieldName'>
<form method="post" name="mailing" action="mailing_list.asp?action=add" onsubmit=" mailing_list();">
<label style="font—size:160%;">[frame_mailinglist]</label></span>
<span class="mailist-box">
</span>
<span class='data'>
<input type="text" name="email" value="" placeholder="Email Address" />
<input type="submit" name="www" value="[mailinglist_button]" />
<input class="clear"></span>
</span >
<input type="radio" name="subscribe" value="1" checked="checked" />
<span class="menu-text">[mailinglist_subscribe]</span>
<input type="radio" name="subscribe" value="0" />
<span class="menu-text">[mailinglist_unsubscribe]</span>
<span class="clear"></span>
</form>
</span>
</span>
</span>
<span class="clear"></span>

Answer 1

Best is to use div elements here. But what you are really looking for is a CSS property called flexbox.
First, here's how I would structure your HTML:
<div class="overall-container">
<div class="address-container">
/* address html goes here /*
</div>
<div class="mailing-list-container">
/* mailing list html goes here /*
</div>
</div>
Now, in your CSS you can write the following:
.overall-container {
width: 100vw; // You can adjust the width of the whole container here
display: flex;
flex-direction: row; // This is the most important part for you
justify-content: center; // Look up other options if this doesn't fit
align-items: center; // Again look up for other options
}
This will put your address container div and your mailing-list container div side by side with each other. The flex-direction property of row controls this. If you wanted them on top of each other, then set flex-direction: column.
Hope this helps. If you need more information, look up CSS flexbox on MDN.