There is a form. Now the form fields are rubber, and change size when the width of the window changes. But the problem is that the width of the block .input_block = (100% - 40px) / 2. Because of this, we have different field widths. How to make the same width of the fields, leaving the width of the label (it is different and left and right margins)?

The .input_block block must remain. Because of him and can not figure out how to do. If it were not, then the field width could be easily calculated (from the width of the form, subtract the width of the right and left label and divide by 2).

 form { font-size: 0; line-height: 0; letter-spacing: -1px; } form .input_block { display: inline-block; vertical-align: top; width: calc((100% - 60px)/2); } form .input_block:nth-child(2n) { margin: 0 0 20px 40px; } form .input_block:last-child { margin: 0 0 0 40px; } form label { display: inline-block; vertical-align: top; font-size: 14px; line-height: 20px; letter-spacing: normal; } form .input_block:nth-child(2n-1) label { width: 63px; } form .input_block:nth-child(2n) label { width: 77px; } form input { box-sizing: border-box; display: inline-block; vertical-align: top; } form .input_block:nth-child(2n-1) input { width: calc(100% - 63px); } form .input_block:nth-child(2n) input { width: calc(100% - 77px); } 
 <form action="#" method="php"> <div class="input_block"> <label>Имя: </label> <input type="text" name="login"> </div> <div class="input_block"> <label>Ѐамилия: </label> <input type="text" name="password"> </div> <div class="input_block"> <label>E-mail: </label> <input type="text" name="login"> </div> <div class="input_block"> <label>Π’Π΅Π»Π΅Ρ„ΠΎΠ½: </label> <input type="text" name="password"> </div> </form>

    2 answers 2

    The issue is resolved. .input_block width of the .input_block to the difference in width of the label :

     form { font-size: 0; line-height: 0; letter-spacing: -1px; } form .input_block { display: inline-block; vertical-align: top; } form .input_block:nth-child(2n-1) { width: calc((100% - 54px)/2); } form .input_block:nth-child(2n) { margin: 0 0 20px 40px; width: calc((100% - 26px)/2); } form .input_block:last-child { margin: 0 0 0 40px; } form label { display: inline-block; vertical-align: top; font-size: 14px; line-height: 20px; letter-spacing: normal; } form .input_block:nth-child(2n-1) label { width: 63px; } form .input_block:nth-child(2n) label { width: 77px; } form input { box-sizing: border-box; display: inline-block; vertical-align: top; } form .input_block:nth-child(2n-1) input { width: calc(100% - 63px); } form .input_block:nth-child(2n) input { width: calc(100% - 77px); } 
     <form action="#" method="php"> <div class="input_block"> <label>Имя: </label> <input type="text" name="login"> <label>Ѐамилия: </label> <input type="text" name="password"> </div> <div class="input_block"> <label>E-mail: </label> <input type="text" name="login"> <label>Π’Π΅Π»Π΅Ρ„ΠΎΠ½: </label> <input type="text" name="password"> </div> </form> 

       form{ display:table; width:100%; border-spacing:4px 0; } form .input_block{ display:table-row; width:100%; } form .input_block label, form .input_block label input{ display:table-cell; } form .input_block label{ min-width:49px; max-width:68px; width:88px; } form .input_block input{ width:100%; min-width:73px; } 
       <form action="#" method="php"> <div class="input_block"> <label>Имя: </label> <input type="text" name="login"> <label>Ѐамилия: </label> <input type="text" name="password"> </div> <div class="input_block"> <label>E-mail: </label> <input type="text" name="login"> <label>Π’Π΅Π»Π΅Ρ„ΠΎΠ½: </label> <input type="text" name="password"> </div> </form>

      • Your option does not fit. In the question I wrote. that the label width should be kept. And you do not have an indent. - Frontender