Edit the distance between two inline elements - html

Question

At present I have 2 columns of content displaying inline on the same line.
The next challenge I am trying to overcome is getting these two elements to be closer together on that same line.
I think I may have found the answer here, but not really sure what it means. If this is the correct way of achieving said outcome, an explanation of the contents would be very helpful: Two column width 50% css
Alternatively, I have the current CSS set up on my stylesheet:
.fields-1 {
float: left;
width: 46%;
text-align: center;
margin: auto auto auto 0;
}
.fields-2 {
float: right;
text-align: center;
display: inline;
width: 46%;
padding-top: 5px;
padding-left: -15px;
margin: auto 0 auto auto;
}
.fields-2 p {
font-size: 25px;
font-weight: 500px;
}
#disclaimer {
font-size: 16px;
line-height: 17px;
font-family: calibri;
font-style: strong;
padding-bottom: 15px;
width: 45%;
}
#your-name {
width: 45%;
margin-right: 2px;
}
#your-email {
width: 45%;
margin-right: 2px;
}
#NewsletterOptions {
width: 45%;
height: 45px;
}
<div class="fields-1">
<p style="text-align: center">[text* your-name id:your-name placeholder: "Team Name/Filmmaker"] <b>(required)</b></p>
<p style="text-align: center">[email* your-email id:your-email placeholder: "Email Address"] <b>(required)</b></p>
<p id="disclaimer">*Your e-mail helps us discuss your contribution with you; this email will not be used for any third party or internal promotions without consent.</p>
</div>
<div class="fields-2">
<p>Would you like 3 new short films to watch each month? </p> <br>
[select* NewsletterOptions id:NewsletterOptions "Yes sure, sounds good!" "Not at the moment, thank you." "Already signed up."]
</div>
Just for context it is 1 half of a contact form.
Any feedback or information, you can provide on this matter would be much appreciated.
Also, if you cold suggest a way for me to line up the Disclaimer text at the bottom with the other elements in that first '.div' I would be most grateful.
Kind regards,
Dan

Answer 1

You can put a wrapper around the two divs and use flexbox, which will give you a column-like distribution of the two divs next to each other:
.wrapper {
display: flex;
justify content: space-around;
}
In the snippet below I erased some superfluous stuff - not sure what you'd want to keep and what not.
.wrapper {
display: flex;
justify content: center;
}
.fields-1 {
width: 46%;
text-align: center;
}
.fields-2 {
text-align: center;
width: 46%;
padding-top: 5px;
}
.fields-2 p {
font-size: 25px;
font-weight: 500px;
}
#disclaimer {
font-size: 16px;
line-height: 17px;
font-family: calibri;
font-style: strong;
padding-bottom: 15px;
}
#your-name {
margin-right: 2px;
}
#your-email {
margin-right: 2px;
}
#NewsletterOptions {
width: 45%;
height: 45px;
}
<div class="wrapper">
<div class="fields-1">
<p style="text-align: center">[text* your-name id:your-name placeholder: "Team Name/Filmmaker"] <b>(required)</b></p>
<p style="text-align: center">[email* your-email id:your-email placeholder: "Email Address"] <b>(required)</b></p>
<p id="disclaimer">*Your e-mail helps us discuss your contribution with you; this email will not be used for any third party or internal promotions without consent.</p>
</div>
<div class="fields-2">
<p>Would you like 3 new short films to watch each month? </p> <br>
[select* NewsletterOptions id:NewsletterOptions "Yes sure, sounds good!" "Not at the moment, thank you." "Already signed up."]
</div>
</div>