JSFiddle - React, Tailwind, and code Playground

HTML

<div class="aside_header" id="sentence_addable">
                       
                       <div class="">
                         <button class="right_edit_btn">Click here to append data</button>
                       </div>
                       <div class="content1">
                         <input type="text" class="sentence_input1" id="sentence_input1">
                       </div>
                       <div class="col-md-2">
                         <input type="text" class="sentence_input2" id="sentence_input2">
                       </div>
                            
                    </div>
                          
                   
                 <div id="add_sentenceDiv"></div>

CSS

.aside_header{border: 1px solid #ccc; margin: 15px 10px;padding: 10px; border-radius: 5px; width: 50%; margin: 0 auto;}
    .aside_header div >div{padding-right: 0;}
    .aside_header div >div p{word-break: break-all;}
    .aside_header div >div:last-child{padding-right: 10px; padding-left: 5px;}
    .aside_header div > input{width: 100%; background-color: #E1E1E1; border: none; height: 35px;}
    .right_edit_btn{height: 40px; max-width: 100%; padding: 0;}
    .right_edit_btn img{max-height: 100%; max-width: 100%;}
    .content1{padding: 5px 0;}

JavaScript

$(document).ready(function(){
    $('.right_edit_btn').click(function() { 
      var input_Sentence1 = document.getElementById('sentence_input1').value.trim();
      var input_Sentence2 = document.getElementById('sentence_input2').value.trim();
      if (input_Sentence1 !=="" &&  input_Sentence2 !=="" ) {
          $("#add_sentenceDiv").append('<div class="aside_header"><div class="content1"><p>'+input_Sentence1+'</p></div><div class="content2"><p>'+input_Sentence2+'</p></div></div></div>');  
          $("#sentence_input1").val("");
          $("#sentence_input2").val("");
       }
        
    });
 });