2つのテキストブロックをフォームの上に左右に配置する

Question

ここではフィドルを見つけることができます。私は基本的に応じて電話番号を作るための方法を探しています解決策が最良の答え！：

.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"> 
 
\t \t <option value="families">Families</option> 
 
\t \t <option value="senior-cleaning">Senior Cleaning</option> 
 
\t \t <option value="senior-downsizing">Senior Downsizing</option> 
 
\t \t <option value="organizing-services">Organizing Services</option> 
 
\t \t <option value="packing-and-unpacking">Packing & Unpacking</option> 
 
\t \t <option value="home-staging">Home Staging</option> 
 
\t </select> 
 
     <select name="package" id="package" placeholder="Select a Package"> 
 
\t \t <option value="dark-blue">Dark Blue</option> 
 
\t \t <option value="true-blue">True Blue</option> 
 
\t \t <option value="blue-move">Blue Move</option> 
 
\t </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>

として選ばれた一つであり、あなたの助けのためにありがとうございましたに合わせて表示されフォームの左上、および残りはフォームの右上に揃えられます。

ご意見をお寄せください。

Answer 1

flexboxを使用すると、このようなアラインメントの問題を解決できます。私が下に掲載したコードでは、あなたのテキストの周りにラベラーdivを作成しました。私はflexboxを使って子要素を揃えました。

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%; 
}