Align 2 Text Blocks Left & Right Above a Form

Question

The fiddle can be found here, any help with this issue would be greatly appreciated! Thank you all very much for your help, the solution is the one chosen as the best answer!:

 .buttoncontact2 { margin: 0px auto; text-align: center; text-transform: none; color: #ffffff; padding: 15px 45px; border-radius: 50px; background: #6DB9FC; font-weight: bold; display: inline-block; margin-top: 15px; } #contactform2 { text-align: center; color: #1a1a1a; background-color: #ffffff; } #contactform2 .sendmessagetext { padding-top: 50px; text-transform: none; } #contactform2 form { width: 75%; margin: 0 auto; } .wrap { max-width: 1600px; margin: 0 auto; position: relative; height: 100%; } .chours { font-weight: bold; padding-bottom: 5px; } 

 <section id="contactform2" class="cform"> <div class="wrap"> <h2 class="sendmessagetext">Get in Touch</h2> <p class="chours">Phone: <a href="tel:<?=$ADMIN_PHONE;?>"> <?=$ADMIN_PHONE;?> </a><br> Hours: <br> Monday - Friday: 8AM - 8PM<br> Saturday: 9AM - 6PM<br> Sunday: Closed</p> <form name="simp_cont" method="post" action="<?=$_SERVER['REQUEST_URI'];?>#cform1" class="contact" onSubmit="return validateForm(this)"> <input class="input" name="captcha" style="position:absolute; left:-9999px;" id="captcha" type="text" /> <input type="text" name="fname" id="name" placeholder="NAME"> <input type="text" name="phone" id="phone" placeholder="PHONE NUMBER"> <input type="text" name="email" id="email" placeholder="EMAIL ADDRESS"> <input type="text" name="footage" id="footage" placeholder="ESTIMATED SQUARE FOOTAGE"> <select name="service" id="service" placeholder="Select a Service"> <option value="families">Families</option> <option value="senior-cleaning">Senior Cleaning</option> <option value="senior-downsizing">Senior Downsizing</option> <option value="organizing-services">Organizing Services</option> <option value="packing-and-unpacking">Packing & Unpacking</option> <option value="home-staging">Home Staging</option> </select> <select name="package" id="package" placeholder="Select a Package"> <option value="dark-blue">Dark Blue</option> <option value="true-blue">True Blue</option> <option value="blue-move">Blue Move</option> </select> <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea> <input name="form_name" type="hidden" value="contact_form" /> <button type="submit" class="buttoncontact2" name='submit'>SEND MESSAGE</button> </form> <br><br> <div class="clear"></div> </div> </section> 

I basically am looking for a way to responsively make the phone number appear aligned to the left top of the form, and the rest aligned to the right top of the form.

Any suggestions would be appreciated!

Answer 1

You can use flexbox to solve this kind of alignment problems. In the code I posted below, I created a wrapper div around your text, and I used flexbox to align the children elements.

HTML

<div class="above-form-wrap">
    <p class="chours">Phone: <a href="tel:904-521-4141">904-521-4141</a></p>
    <p class="chours">Hours:<br>
    Monday - Friday: 8AM - 8PM<br>
    Saturday: 9AM - 6PM<br>
    Sunday: Closed</p><a id="cform1" name="cform1"></a>
</div>

CSS

.above-form-wrap {
    width: 40%; /*form width, you may need to add related style in your media query*/
    margin: 0 auto;
    display: flex;
    flex: 1 1 50%;
    align-items: center;
}
.above-form-wrap .chours {
    width: 50%;
}