enter image description here

The structure is

.right-block { display: block; position: relative; height: 200px; width: 400px; float: right; } .left-block { display: block; padding-top: 100px; position: relative; width: 400px; height: 67px; } .header { display: block; position: relative; top: 20px; text-align: center; } 
 <div class="voucher-body"> <div class="head"> <span class="header">Service Request</span> </div> <div class="left-block"> <span class="new-line"> <span class="field-label">Group Name:</span> <span class="thumbnail"> 56pax Motor Coach</span> </span> <span class="new-line"> <span class="field-label">Leave Date:</span> <span class="thumbnail">12/15/2017</span> </span> <span class="new-line"> <span class="field-label">Leave Time:</span> <span class="thumbnail">5:00 pm</span> <span class="new-line"> <br> <span class="field-label">Pickup Details:</span> <span class="thumbnail"> New Comers HS 28-01 41st. Ave. Long Island City. NY 11101</span> </span> </div> <div class="right-block"> <span class="new-line"> <span class="thumbnail" id="main">Wednesday, December 13,2017</span> <span class="field-label"></span> </span> <span class="new-line"> <span class="field-label">Charter No:</span> <span class="thumbnail">9230</span> </span> <span class="new-line"> <span class="field-label">Dispatch ID:</span> <span class="thumbnail">3293</span> </span> <br> <span class="new-line"> <span class="field-label">Phone:</span> <span class="thumbnail"></span> </span> <span class="new-line"> <span class="field-label">Fax:</span> <span class="thumbnail"></span> </span> <br> <span class="new-line"> <span class="field-label">Return Date:</span> <span class="thumbnail">12/15/2017</span> </span> <span class="new-line"> <span class="field-label">Drop Time:</span> <span class="thumbnail">10:00 pm</span> </span> <span id="new-line"> <span class="field-label"># Vehicles</span> <span class="thumbnail">1</span> <span class="field-label">Unit Type</span> <span class="thumbnail">56-Bus</span> </span> <span class="new-line"> <span class="field-label">Termination</span> <span class="thumbnail"> Drop off in DC RTN @ 5pm to LIC </span> </span> <span class="new-line"> <span class="field-label">Point:</span> </span> </div>

How can I prescribe that the right and left blocks are on the same level?

And then the structure is such that under the header goes left , and under the left right , and it is necessary that the side was

    2 answers 2

    It is possible through flexbox

     .voucher-body { display: flex; flex-wrap: wrap; justify-content: space-between; } .head { flex-basis: 100%; margin-bottom: 100px; } .right-block{ float: none; padding-top: 0; }

      Try to put

       .left-block{ float:left; }

      And remove the padding-top.