Button and input elements doesn't get applied css style : background

I want to bring output similar to one shown in the figure. I build the table in table2() and build buttons using ButtonDOM().

I want to get the layout shown in figure, so I make the button elements move to right by some pixels. I have a basic question in css,

To make elements move left, right, top, bottom I have to set position property to relative or absolute but when I resize the window, I see elements are rearranged incorrect way. I want to move elements left, right, top, bottom as well on window resize element to show in correct manner. How to achieve this?

I have applied background color to whole div but I see the buttons and date input element appear outside the div, though all these elements are within this div.

Note : I had to position the input date and button elements relative and absolute and the div #buttonsdiv relative just to position elements where I needed

To know more about this question https://stackoverflow.com/questions/60318158/button-and-input-elements-doesnt-get-applied-css-style-background?noredirect=1#comment106697427_60318158

function maintest () {


   table2();
   ButtonDOM();
   addClasses();
  }



function table2 () {
    let h = $("<h3>").html("Borrowable Features:").prop("class","underline").appendTo("#BorrowableTable");
    let h1 = $("<h3>").html("Features:").prop("class","underline").appendTo("#BorrowableTable");
    let $table = $('<table>').attr({"id" : "borrowable"}).css({"width":"50%"});
    let $row1 = $('<tr>').appendTo($table);
    $('<td>').appendTo($row1);
    let header = $('<td>').text("Feature").appendTo($row1); 
    let $row2 = $('<tr>').prop("id","autocompleterow").appendTo($table);
    let $cell0 = $('<td>').appendTo($row2);



        let $cell1 = $('<td>').appendTo($row2);
        let $autocomplete1 = $("<input>").attr({"id" : "selector0","class":"creamcolorInput"}).appendTo($cell1);


        $("#BorrowableTable").append($table);
        autocomplete2 = $("#selector0").autocomplete( {"source": ['c++','java','javascript']}, {select: function(event, ui) { 
            selectedObj = ui.item.value; 


        } });

}



function addClasses () {
    let tableRows = $('tr').addClass('tableRows');
    let tableDefn = $('td').attr({"class":"tableDefn"});
    let tableHeader = $('th').attr({"class":"tableHeader"});
    let tbodyDOM = $('tbody').attr({"class" : "tbodyDOM"});
}


function ButtonDOM() {
  let buttonsdiv =  $("<div></div>").attr({"id":"buttonsdiv"}).css({"width":"50%"}).appendTo($("#BorrowableTable")); 
  let returnDate = $("<input>").attr({"id":"returnDate"}).appendTo($('#buttonsdiv'));
   $( "#returnDate" ).datepicker({ dateFormat: 'yy-mm-dd' }).attr({"class":"creamcolorInput"});

   $("<td>").html("Return Date").insertBefore(returnDate).css({"position":"relative","left":"350px","display":"inline"});
    $("<button>Borrow</button>").attr({"value":"Save","id":"borrowButton"}).appendTo(buttonsdiv)

}

#buttonsdiv {
     height: unset !important;
     width:50%;
     position: relative;
     left :50px !important;
     bottom :0px !important;
     background-color: papayawhip !important;
  }

  #BorrowableTable {
    display: flex !important; 
    flex-direction: column;
    height:fit-content !important;

  }


  #borrowable {
      display: unset !important; 
      border-collapse: collapse;
      border-spacing :unset !important;
      margin-left:100px;
  }




  #BorrowableTable,.creamcolorInput,#buttonsdiv {
    background-color: papayawhip;

  }

  #borrowButton {
    position: absolute;
    left: 325px;
    top: 50px;
    height: 36px;
    width: 205px;
    cursor: pointer;
    border: solid 1px;
    background-color:whitesmoke;
    font-family: ffunit;
    font-size: 14px;
    margin-top: 35px;
    margin-left: 2px;
}

     #returnDate {
      position: absolute;
      left : 330px !important;
      top:25px;
      height:36px;
      width:200px; 
  }
   .tableRows, .tableDefn, .tableHeader { /*added from addClasses() */

      padding: 0; 
      margin: 0;
      font-family: ffunit;
      font-size: 14px;
      font-weight: bold;
      padding-right: 50px !important;
    }



   button {
      height:36px;
      width:205px;
      cursor: pointer;
      border: solid 1px;
      background-color:whitesmoke;
      font-family: ffunit;
      font-size: 14px;
      margin-top:35px;
      margin-left: 2px;
  }


  input {
    height: 30px;
    width: 250px;
    font-size: 20px;
    text-indent: 6px;
  }



 .tbodyDOM {
   float:  left !important;
  } 

   .images {
      position: relative !important;
      cursor: pointer !important;
      width:35px !important;
      height:35px !important;
      left: 35px !important;

  } 

   .underline {
     text-decoration: underline;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<body onload="maintest()">

   <div id="BorrowableTable"></div>
</body>