The problem is that I can't fix them down. I would be glad if the community tells. Thank!

.div-chat-window { border: 5px double #2c3e50; display: flex; flex-direction: row; justify-content: space-between; margin-left: 200px; margin-right: 200px; } .div-chat-text-field { width: 95%; height: 100px; bottom: 0; } .input-text-field { width: 100%; } .div-button-send-message { justify-content: flex-end; bottom: 0; } 
 <div class="div-chat-window"> <div class="div-chat-text-field"> <input class="input-text-field" type="text" name="text-chat-field" placeholder="Enter your message... "> </div> <div class="div-button-send-message"> <button id="Send">Send</button> </div> </div>

  • one
    Add markup - E_K
  • @E_K added markup - HegoJune

1 answer 1

  1. To place the elements at the bottom of the block, you need to use the align-items: flex-end property.
  2. Now add height: 100px; for parent div-chat-window instead of div-chat-text-field

 .div-chat-window { height: 100px; border: 5px double #2c3e50; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; margin-left: 200px; margin-right: 200px; } .div-chat-text-field { width: 95%; bottom: 0; } .input-text-field { width: 100%; } .div-button-send-message { justify-content: flex-end; bottom: 0; } 
 <div class="div-chat-window"> <div class="div-chat-text-field"> <input class="input-text-field" type="text" name="text-chat-field" placeholder="Enter your message... "> </div> <div class="div-button-send-message"> <button id="Send">Send</button> </div> </div>

  • Thank you very much! - HegoJune