JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

.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;
  } 
  
      .flex-item1 div {
        display: flex;
        flex-direction: column;
        float: left;
    }