JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Update Deliverables</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Update Window</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Deliverables</h4>
        </div>
        <div class="modal-body">
          <form id="myform" type="post">
  <fieldset>
    <legend align="center">Update Datatable</legend>
    <p>Please fill out the shown fields to add data to the DataTable</p>
    <div class="elements">
      <label for="program">Program :</label>
       <select name = "program">
            <option value = "AHR">AHR</option>
            <option value = "AMMO">AMMO</option>
            <option value = "DAR-Q">DAR-Q</option>
            <option value = "Doctrine Development">Doctrine Development</option>
            <option value = "Operational Energy">Operational Energy</option>
            <option value = "Ordnance Multimedia">Ordnance Multimedia</option>
            <option value = "SRC Handbook">SRC Handbook</option>
            <option value = "WTBn">WTBn</option>
         </select>
    </div>
	 <div class="elements">
      <label for="Deliverable">Deliverable :</label>
      <select name="Deliverable">
           ...

CSS

#myform {
	margin:0 auto;
	width:250px;
	padding:14px;
	align: center;
}

label {
	width: 10em;
	float: left;
	margin-right: 0.5em;
	display: block;
	vertical-align: middle;
}
.submit {
	float:right;
}

fieldset {
	background:#EBF4FB none repeat scroll 0 0;
	border:2px solid #B7DDF2;
	width: 450px;
}

legend {
	color: #fff;
	background: #80D3E2;
	border: 1px solid #781351;
	padding: 2px 6px
	text-align: center;
}
.elements {
	padding:10px;
}
p {
	border-bottom:1px solid #B7DDF2;
	color:#666666;
	font-size:12px;
	margin-bottom:20px;
	padding-bottom:10px;
}
span {
	color:#666666;
	font-size:12px;
	margin-bottom:1px;
	
}
.btn{
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  border: 1px solid #B7DDF2;
  
}

.btn:hover{
  color: #333333;
  background-color: #e6e6e6;
}

div.container {
	min-width: 980px;
	margin: 0 auto;
}
.header {
  padding: 10px;
  text-align: center;
}
body {
	font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #fff;
}
div.dt-button-collection {
    position: static;