I can not press the (orange) float element with the .text class to the lower border (yellow) of the parent with the .main class.

Example:

 .wrapper { width: 800px; height: 400px; padding: 40px; background: gray; } .main { width: 100%; background: yellow; overflow: hidden; } .text { float: left; background: orange; margin-right: 10px; font-size: 20px; } .input-wrap { max-width: 100%; overflow: hidden; } .input { width: 100%; font-size: 24px; } 
 <div class="wrapper"> <div class="main"> <div class="text"> <span>Телефон:</span> </div> <div class="input-wrap"> <input type="text" class="input" placeholder="+7 926 987-65-43" /></div> </div> </div>

    3 answers 3

    With float this is unlikely to be done. You can with the position: absolute press to the bottom:

     .wrapper { width: 800px; height: 400px; padding: 40px; background: gray; } .main { width: 100%; background: yellow; overflow: hidden; padding-left: 88px; position: relative; } .text { position: absolute; left: 0; bottom: 0; background: orange; margin-right: 10px; font-size: 20px; } .input-wrap { max-width: 100%; overflow: hidden; } .input { width: 100%; font-size: 24px; } 
     <div class="wrapper"> <div class="main"> <div class="text"> <span>Телефон:</span> </div> <div class="input-wrap"> <input type="text" class="input" placeholder="+7 926 987-65-43" /></div> </div> </div>

    Option with absolute to full height:

     .wrapper { width: 800px; height: 400px; padding: 40px; background: gray; } .main { width: 100%; background: yellow; overflow: hidden; padding-left: 88px; position: relative; } .text { position: absolute; top: 0; left: 0; bottom: 0; background: orange; margin-right: 10px; font-size: 20px; } .input-wrap { max-width: 100%; overflow: hidden; } .input { width: 100%; font-size: 24px; } 
     <div class="wrapper"> <div class="main"> <div class="text"> <span>Телефон:</span> </div> <div class="input-wrap"> <input type="text" class="input" placeholder="+7 926 987-65-43" /></div> </div> </div>

    flex :

     .wrapper { width: 800px; height: 400px; padding: 40px; background: gray; } .main { width: 100%; background: yellow; overflow: hidden; display: flex; align-items: flex-end; } .text { background: orange; margin-right: 10px; font-size: 20px; } .input-wrap { max-width: 100%; width: 100%; overflow: hidden; } .input { width: 100%; font-size: 24px; } 
     <div class="wrapper"> <div class="main"> <div class="text"> <span>Телефон:</span> </div> <div class="input-wrap"> <input type="text" class="input" placeholder="+7 926 987-65-43" /></div> </div> </div>

    Option with flex to full height:

     .wrapper { width: 800px; height: 400px; padding: 40px; background: gray; } .main { width: 100%; background: yellow; overflow: hidden; display: flex; } .text { background: orange; margin-right: 10px; font-size: 20px; } .input-wrap { max-width: 100%; width: 100%; overflow: hidden; } .input { width: 100%; font-size: 24px; } 
     <div class="wrapper"> <div class="main"> <div class="text"> <span>Телефон:</span> </div> <div class="input-wrap"> <input type="text" class="input" placeholder="+7 926 987-65-43" /></div> </div> </div>

    table :

     .wrapper { width: 800px; height: 400px; padding: 40px; background: gray; } .main { width: 100%; background: yellow; overflow: hidden; display: table; } .text { display: table-cell; vertical-align: bottom; background: orange; margin-right: 10px; font-size: 20px; } .input-wrap { max-width: 100%; width: 100%; overflow: hidden; } .input { width: 100%; font-size: 24px; } 
     <div class="wrapper"> <div class="main"> <div class="text"> <span>Телефон:</span> </div> <div class="input-wrap"> <input type="text" class="input" placeholder="+7 926 987-65-43" /></div> </div> </div>

    PS: if I understand the task correctly.

      Use the line-height :

       .wrapper { width: 800px; height: 400px; padding: 40px; background: gray; } .main { width: 100%; background: yellow; overflow: hidden; } .text { float: left; background: orange; margin-right: 10px; font-size: 20px; line-height: 40px; } .input-wrap { max-width: 100%; overflow: hidden; } .input { width: 100%; font-size: 24px; } 
       <div class="wrapper"> <div class="main"> <div class="text"> <span>Телефон:</span> </div> <div class="input-wrap"> <input type="text" class="input" placeholder="+7 926 987-65-43" /></div> </div> </div>

      • Thanks for the advice! But, line-height spreads the .text block to its height. Maybe there is some other way (besides flex)? - Rabbit
      • @Rabbit can absolutely position the span along the bottom border of .text, after first specifying .text some height. - Vadizar
      • Thank! I realized that in this situation it would not be possible to make rubber heights. - Rabbit
       .text { float: left; background: orange; /*margin-right: 10px;*/ font-size: 20px; position: relative; bottom: -11px; }