How to make block 3 stand in front of block 1, and not in front of block 2, as it is now?

.flex-container3 { width: 100%; height: auto; margin: auto; margin-top: 215px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; } .flex-item1 { order: 1; width: 80%; display: inline-block; } .comment1 { width: 45%; display: inline-block; text-align: right; } .comment2 { width: 45%; display: inline-block; height: 250px; } input { width: 250px; } .name { display: inline-block; width: 45%; height: 50px; border: 1px solid black; margin-right: 30px; margin-top: 35px; } .mail { display: inline-block; width: 45%; height: 50px; border: 1px solid black; margin-right: 30px; margin-top: 35px; } .commit { display: inline-block; width: 45%; height: 50px; border: 1px solid black; margin-right: 30px; margin-top: 35px; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="flex-container3"> <div class="flex-item1"> <div class="comment1"> <div class="name">1 <input type="text" name="name" value=""> </div> <div class="mail">2 <input type="text" name="name" value=""> </div> </div> <div class="comment2"> <div class="commit">3 <input type="text" name="name" value=""> </div> </div> </div> </body> </html>

    4 answers 4

     .flex-item1 { display: inline-flex; } 

     .flex-container3 { width: 100%; height: auto; margin: auto; margin-top: 215px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; } .flex-item1 { order: 1; width: 80%; display: inline-flex; } .comment1 { width: 45%; display: inline-block; text-align: right; } .comment2 { width: 45%; display: inline-block; height: 250px; } input { width: 250px; } .name { display: inline-block; width: 45%; height: 50px; border: 1px solid black; margin-right: 30px; margin-top: 35px; } .mail { display: inline-block; width: 45%; height: 50px; border: 1px solid black; margin-right: 30px; margin-top: 35px; } .commit { display: inline-block; width: 45%; height: 50px; border: 1px solid black; margin-right: 30px; margin-top: 35px; } 
     <div class="flex-container3"> <div class="flex-item1"> <div class="comment1"> <div class="name">1<input type="text" name="name" value=""></div> <div class="mail">2<input type="text" name="name" value=""></div> </div> <div class="comment2"> <div class="commit">3<input type="text" name="name" value=""></div> </div> </div> </div>

    • Thanks helped =) - Evgeny Lyubimov

    It was still possible as an option to do so :)

     .comment1 { width: 45%; display: inline-block; vertical-align: top; text-align: right; } .comment2 { width: 45%; display: inline-block; vertical-align: top; height: 250px; } 
       .flex-item1 div { display: flex; flex-direction: column; float: left; }

      Or like this. https://jsfiddle.net/92zha34t/

        Here there is an article on Flexbox, which more or less summarizes the knowledge necessary for its use.