jquery-ui-dialog

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<button id="dButton">Responsive Dialog</button>

<div class="container">

<div id="content_1" class="content_dialog">
  <div class="box-left left-div left-text">
    <table id="classTable" class="table table-bordered">
           <thead> 
           <tr>
              <th> </th>
              <th>Element</th>
              <th>Volume Serial</th>
            </tr>
            </thead>
            
            <tbody>
              <tr>
                <th><input type="radio"></th>
                <th>Drive1(1)</th>
                <th>00000616</th>
              </tr>
              
               <tr>
                <th><input type="radio"></th>
                <th>Drive2(1)</th>
                <th>00000216</th>
              </tr>
              
               <tr>
                <th><input type="radio"></th>
                <th>slot(1)</th>
                <th>00000516</th>
              </tr>
            </tbody>
     </table>      
  </div><br>
  <div class="actions">
     <input type="button" value="Move>" /><br>
    <input type="button" value="Refresh" />
  </div>
  <div class="box-right  right-div right-text">
    <table id="classTable1" class="table table-bordered1">
           <thead> 
           <tr>
              <th> </th>
              <th>Element</th>
              <th>Volume serial</th>
            </tr>
            </thead>
            
            <tbody>
              <tr>
                <th><input type="radio"></th>
                <th>I/O Station)</th>
                <th></th>
              </tr>
              
               <tr>
                <th><input type="radio"></th>
                <th>slot1(1)</th>
                <th></th>
              </tr>
              
               <tr>
                <th><input type="radio"></th>
        ...

CSS

#content_1 { display: none; }
.content_dialog{display:block;}

.container
{
  text-align: center;
  padding: 15px;  
}

.left-div
{
  display: inline-block;
  max-width: 300px;
  height: 300px;
  text-align: left;
  margin: 2px;
  background-color: red;
  border-radius: 3px;
  vertical-align: top;
  float: left;
}
.right-div
{
  display: inline-block;
  max-width: 150px;
  text-align: left;
  padding: 30px;
  background-color: red;
  border-radius: 3px;
  float: right;
  margin-top: -120px;
}
.left-text, .right-text
{
  font: 16px 'Courier New', monospace;
	color: #000;
}
.actions {
  margin-top: 40px;
}

JavaScript

$("#dButton").click(function () {
   $("#content_1").dialog('open');
});

 $("#content_1").dialog({
      autoOpen: true,
        width: '600', // overcomes width:'auto' and maxWidth bug
        height: 300,
        maxWidth:8000,
        modal: true,
        fluid: true, //new option
        resizable: true,
        open: function(event, ui){ 
           fluidDialog(); // needed when autoOpen is set to true in this codepen
        }
    });


// run function on all dialog opens
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
    fluidDialog();
});

// remove window resize namespace
$(document).on("dialogclose", ".ui-dialog", function (event, ui) {
    $(window).off("resize.responsive");
});