Две карты внутри div, ширина не равна

<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet"/>
<form id = "dataOnTab" role = "form" class = "form-horizontal details-content" method = "post" enctype = "multipart/form-data">

  <input type = "hidden" id = "SelectedTabForSave" name = "SelectedTabForSave" value = "@RegisterBookTabs.FamilyCustodyView" />

  <div class = "container" style = "max-width:100% ;">
    <div class = "row voffset4">
      <div class = "col-md-12 column">
        <div class = "card panel-info mb-4">
          <div class = "card-header">
            <h6 class = "card-title">
              @SharedResources.Index.WorkAbility
            </h6>
          </div>
          <div class = "card-body">
            <div class = "row">
              <div class = "form-group row col-6">
                <label for = "WorkAbilityID" class = "col-sm-4 text-right control-label">@SharedResources.Index.WorkAbility</label>
                <div class = "col-sm-6">
                  <select class = "form-control input-sm" id = "WorkAbilityID" data-bind = "
                                    value: workAbilityID,
                                    options: workAbilityIDSelectList,
                                    optionsText: 'Text' ,
                                    optionsValue: 'Value' "></select>
                </div>
              </div>

              <div class = "form-group row col-6">
                <label for = "SocialWelfareCenter" class = "col-sm-4 text-right control-label">@SharedResources.Index.SocialWelfareCenter</label>
                <div class = "col-sm-5">
                  <input class = "form-control" type = "text" id = "socialWelfareCenter-error" data-bind = "value: socialWelfareCenter">
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div class = "row voffset4">
      <div class = "card panel-info mb-4">
        <div class = "card-header">
          <h6 class = "card-title">
            @SharedResources.Index.FamilyAndCustody
          </h6>
        </div>
        <div class = "card-body">
          <div class = "form-group row">
            <div class = "col-lg-12 col-md-12 col-sm-12">
              <div id = "family-custudy-grid-container" class = "knockout">
                <table id = "mDataTable" data-cols-num = "5" class = "table" aria-describedby = "mDataTable_info">
                  <thead>
                    <tr class = "search-cols" style = "display: none;" role = "row"></tr>
                    <tr class = "actions-row" role = "row">
                      <td class = "header-action-row" style = "border:none; cursor:default;" colspan = "11">
                        <h6 class='datatable-title'><span class='fa fa-list'></span>&nbsp; @SharedResources.Index.FamilyAndCustody</h6>
                        <div class = "action-images pull-right">
                          <div class = "add-img fa fa-plus-circle" style = "cursor:pointer;" title = "@SharedResources.Index.Add" data-bind = "click: Editable ? mainDataAdd : null, css:{'icon-disabled':  Editable == false}"></div>
                        </div>
                      </td>
                    </tr>
                    <tr>

                      <th style = "width: 20%;" data-bind = "click: function () {mainDataRefreshData(1,3)}, css: mainDataFirstNameIcon">@SharedResources.Index.Firstname</th>
                      <th style = "width: 20%;" data-bind = "click: function () {mainDataRefreshData(1,2)}, css: mainDataLastNameIcon">@SharedResources.Index.Lastname</th>
                      <th style = "width: 16%;" data-bind = "click: function () {mainDataRefreshData(1,4)}, css: mainDataRelationNameIcon">@SharedResources.Index.RelationName</th>
                      <th style = "width: 8%;" data-bind = "click: function () {mainDataRefreshData(1,8)}, css: mainDataDocumentURNumberIcon">@SharedResources.Index.DocumentURNumber</th>
                      <th style = "width: 8%;" data-bind = "click: function () {mainDataRefreshData(1,9)}, css: mainDataPhoneNumberIcon">@SharedResources.Index.PhoneNumber</th>
                      <th style = "width: 8%;" data-bind = "click: function () {mainDataRefreshData(1,10)}, css: mainDataCellPhoneNumberIcon">@SharedResources.Index.CellPhoneNumber</th>
                      <th style = "width: 6%;" data-bind = "click: function () {mainDataRefreshData(1,5)}, css: mainDataCCustodyIndicatorIcon">@SharedResources.Index.CustodyIndicator</th>
                      <th style = "width: 6%;" data-bind = "click: function () {mainDataRefreshData(1,6)}, css: mainDataEmergencyNotificationIcon">@SharedResources.Index.EmergencyNotification</th>
                      <th style = "width: 6%;" data-bind = "click: function () {mainDataRefreshData(1,7)}, css: mainDataFuneralNotificationIcon">@SharedResources.Index.FuneralNotification</th>

                      <th></th>
                    </tr>
                  </thead>
                  <tr data-bind = "visible: mainData() == null || mainData().length < 1">
                    <td data-bind = "attr: { 'colspan': 11 }">
                      <div class = "alert alert-warning" role = "alert"> @SharedResources.Index.NoData</div>
                    </td>
                  </tr>
                  <tbody data-bind = "foreach: mainData">
                    <tr style = "cursor:pointer;" data-bind = "click :$parent.mainDataSelectRow.bind($data,$index()),
                        css: { 'row-selected': $parent.mainDataSelectedRowPosition() != null && $index() == $parent.mainDataSelectedRowPosition() && ForDelete() == false , 'for-delete': ForDelete() == true}">
                      <td data-bind = "text: Firstname, click: Editable ? $root.mainDataDetails : null, attr : {'disabled' : ForDelete}  "></td>
                      <td data-bind = "text: Lastname, click: Editable ? $root.mainDataDetails : null, attr : {'disabled' : ForDelete} "> </td>
                      <td data-bind = "text: RelationName, click: Editable ? $root.mainDataDetails : null, attr : {'disabled' : ForDelete}  "></td>
                      <td data-bind = "text: DocumentURNumber, click: Editable ? $root.mainDataDetails : null, attr : {'disabled' : ForDelete}  "></td>
                      <td data-bind = "text: PhoneNumber, click: Editable ? $root.mainDataDetails : null, attr : {'disabled' : ForDelete}  "></td>
                      <td data-bind = "text: CellPhoneNumber, click: Editable ? $root.mainDataDetails : null, attr : {'disabled' : ForDelete}  "></td>
                      <td data-bind = "text: CustodyIndicator, click: Editable ? $root.mainDataDetails : null, attr : {'disabled' : ForDelete}  "></td>
                      <td data-bind = "text: EmergencyNotification, click: Editable ? $root.mainDataDetails : null, attr : {'disabled' : ForDelete}  "></td>
                      <td data-bind = "text: FuneralNotification, click: Editable ? $root.mainDataDetails : null, attr : {'disabled' : ForDelete}  "></td>

                      <td class = "action-column">
                        <div class = "row-delete fa fa-share icon-flip" title = "@SharedResources.Index.Undo" style = "color: #096224; cursor: pointer;" data-bind = "click: $parent.mainDataUndoRemove, visible: ForDelete() == true"></div>
                        <div class = "row-delete fa fa-minus-circle icon-delete" title = "@SharedResources.Index.Delete" data-bind = "click: (CanDelete() == true && $parent.active() != 3) && ($parent.isChangedCfm() == false && Editable) ? $parent.mainDataRemove: null, visible: ForDelete() == false,
                                                                           css:{'icon-disabled':  (CanDelete() == false && $parent.active() != 3) ||  $parent.isChangedCfm() == true  ||  Editable == false }" style = "color: #9E0101;cursor: pointer;"></div>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <div class = "row">
                  <div class = "col-sm-9">
                    <ul class = "pagination pagination-sm" style = "margin: 0">
                      <li data-bind = "css: { disabled:  mainDataCurrentPage() == 1 }, visible: mainDataTotalPages() > 0" class = "page-link disabled">
                        <a data-bind = "click: mainDataCurrentPage() > 1 ? mainDataRefreshData.bind($data, 1, null) : null, style: { cursor: mainDataCurrentPage() == 1 ? 'not-allowed' : 'pointer' }">&laquo;</a>
                      </li>
                      <li data-bind = "css: { disabled:  mainDataCurrentPage() == 1 }, visible: mainDataTotalPages() > 0" class = "page-link disabled">
                        <a data-bind = "click: mainDataCurrentPage() > 1 ? mainDataRefreshData.bind($data, mainDataCurrentPage()-1, null) : null, style: { cursor: mainDataCurrentPage() == 1 ? 'not-allowed' : 'pointer' }">&lsaquo;</a>
                      </li>
                      <!-- ko foreach: new Array(mainDataTotalPages()) -->
                      <li class = "page-item" data-bind = "css: { active:  $index()+1 == $parent.mainDataCurrentPage() }, visible: $index()+1 < $parent.mainDataCurrentPage()+3 && $index()+1 > $parent.mainDataCurrentPage()-3">
                        <a href = "#" class = "page-link" data-bind = "text: $index()+1, click: $parent.mainDataRefreshData.bind($data,$index()+1, null)"></a>
                      </li>
                      <!-- /ko -->
                      <li data-bind = "css: { disabled:  mainDataCurrentPage() == mainDataTotalPages() }, visible: mainDataTotalPages() > 0 " class = "page-link">
                        <a data-bind = "click: mainDataCurrentPage() < mainDataTotalPages() ? mainDataRefreshData.bind($data, mainDataCurrentPage()+1, null) : null, style: { cursor: mainDataCurrentPage() == mainDataTotalPages() ? 'not-allowed' : 'pointer' }">&rsaquo;</a>
                      </li>
                      <li data-bind = "css: { disabled:  mainDataCurrentPage() == mainDataTotalPages() }, visible: mainDataTotalPages() > 0 " class = "page-link">
                        <a data-bind = "click: mainDataCurrentPage() < mainDataTotalPages() ? mainDataRefreshData.bind($data, mainDataTotalPages(), null) : null, style: { cursor: mainDataCurrentPage() == mainDataTotalPages() ? 'not-allowed' : 'pointer' }">&raquo;</a>
                      </li>
                    </ul>
                  </div>
                  <div class = "col-sm-3">
                    <span class = "pull-right"> @SharedResources.Index.Record <span data-bind = "text: mainDataTotalItems"></span> </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @if (User.IsInRole(AppRole.AdmissionService.ToString()) || User.IsInRole(AppRole.SocialWorker.ToString()) || User.IsInRole(AppRole.HeadNurse.ToString()) || User.IsInRole(AppRole.DepartmentNurse.ToString())) {
    <div class = "row voffset4">
      <div class = "card panel-info mb-4">
        <div class = "card-header">
          <h6 class = "card-title">
            @SharedResources.Index.ContactWithFamilyMembers
          </h6>
        </div>
        <div class = "card-body">
          <div class = "form-group row">
            <div class = "col-md-12">
              <h6 class = "subtitle"><span class = "fa fa-search"></span> @SharedResources.Index.Filter</h6>
              <div id = "search-holder">
                <div id = "search-box">
                  <div class = "form-group row">
                    <div class = "col-lg-10 col-md-9 col-sm-9 row">
                      <div class = "col-lg-8 col-md-8 col-sm-6">
                        <input id = "searchResident" type = "text" class = "form-control search-input" data-bind = "value: contactWithFamilySearchTerm, valueUpdate: 'afterkeydown', enterkey: contactWithFamilyRefreshData" placeholder = "@SharedResources.Index.SearchMessage" />
                      </div>
                      <div class = "col-lg-2 col-md-2 col-sm-3">
                        <input id = "searchDateStart" type = "text" class = "form-control search-input searching-date-from-to picker" data-bind = "datePicker: contactWithFamilySearchDateFrom, maxDate: contactWithFamilySearchDateTo, valueUpdate: 'afterkeydown', enterkey: contactWithFamilyRefreshData"
                          placeholder = "@SharedResources.Index.SearchDateFrom" />
                      </div>
                      <div class = "col-lg-2 col-md-2 col-sm-3">
                        <input id = "searchDateEnd" type = "text" class = "form-control search-input searching-date-from-to picker" data-bind = "datePicker: contactWithFamilySearchDateTo, minDate: contactWithFamilySearchDateFrom, valueUpdate: 'afterkeydown', enterkey: contactWithFamilyRefreshData"
                          placeholder = "@SharedResources.Index.SearchDateTo" />
                      </div>
                    </div>
                    <div class = "col-lg-2 col-md-3 col-sm-3">
                      <button type = "button" id = "search" class = "btn btn-newline" data-bind = "click: function() {contactWithFamilyRefreshData()}"> @SharedResources.Index.Search</button>
                      <button class = "btn btn-sm leftmargin10" title = "@SharedResources.Index.Reset" data-bind = "click: function() {contactWithFamilyResetSearch()}">
                                                <span class = "fa fa-repeat"></span>
                                            </button>
                    </div>
                  </div>
                </div>
              </div>
              <div id = "contact-with-family-members" class = "knockout">
                <table id = "mDataTable" data-cols-num = "5" class = "table" aria-describedby = "mDataTable_info">
                  <thead>
                    <tr class = "search-cols" style = "display: none;" role = "row"></tr>
                    <tr class = "actions-row" role = "row">
                      <td class = "header-action-row" style = "border:none; cursor:default;" colspan = "11">
                        <h6 class='datatable-title'><span class='fa fa-list'></span>&nbsp; @SharedResources.Index.ContactWithFamilyMembers</h6>
                        <div class = "action-images pull-right">
                          <div class = "add-img fa fa-plus-circle" style = "cursor:pointer;" title = "@SharedResources.Index.Add" data-bind = "click: newItemAdded() == false && mainDataTotalItems() != 0 && Editable && active != 3 ? contactWithFamilyAdd : null, css:{'icon-disabled':newItemAdded() == true || mainDataTotalItems() == 0 || Editable == false || active == 3}, style:{cursor: newItemAdded() == false && mainDataTotalItems() != 0 ?'pointer' :'not-allowed' }"></div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th style = "width: 22%;" data-bind = "click: function () {contactWithFamilyRefreshData(1,1)}, css: userIcon">@SharedResources.Index.ContactedPerson</th>
                      <th style = "width: 22%;" data-bind = "click: function () {contactWithFamilyRefreshData(1,2)}, css: dateOfContactIcon">@SharedResources.Index.DateOfContact</th>
                      <th style = "width: 22%;" data-bind = "click: function () {contactWithFamilyRefreshData(1,3)}, css: timeOfContactIcon">@SharedResources.Index.TimeOfContact</th>
                      <th style = "width: 12%;" data-bind = "click: function () {contactWithFamilyRefreshData(1,4)}, css: employeeIcon">@SharedResources.Index.Employee</th>
                      <th style = "width: 22%;" data-bind = "click: function () {contactWithFamilyRefreshData(1,5)}, css: remarkIcon">@SharedResources.Index.Remark</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tr data-bind = "visible: contactWithFamily() == null || contactWithFamily().length < 1">
                    <td data-bind = "attr: { 'colspan': 11 }">
                      <div class = "alert alert-warning" role = "alert"> @SharedResources.Index.NoData</div>
                    </td>
                  </tr>
                  <tbody data-bind = "foreach: contactWithFamily">
                    <tr style = "cursor: pointer;" data-bind = "click :$parent.contactWithFamilySelectRow.bind($data,$index()),
                                                css: { 'row-selected': $parent.contactWithFamilySelectedRowPosition() != null && $index() == $parent.contactWithFamilySelectedRowPosition() && ForDelete() == false, 'for-delete': ForDelete() == true }">
                      <td data-bind = "attr : {'disabled' : (ForDelete() == true)}, event:{ change: $parent.contactWithFamilyModified} ">
                        <select class = "form-control input-sm" id = "contact" data-bind = "value : FamilyAndCustudyId,
                                                    options: $parent.contactSelectList,
                                                    optionsText: 'Text',
                                                    optionsValue: 'Value', attr : {'disabled' :  (ForDelete() == true || !Editable)}, event:{ click: $parent.contactWithFamilyModified}"></select>
                      </td>

                      <td style = "position: relative;">
                        <div class = "date datetimepicker">
                          <input type = "text" id = "DateOfContact" class = "form-control" data-bind = "datePicker: DateOfContact, attr : {'disabled' :  (ForDelete() == true || !Editable)}, event:{ click: $parent.contactWithFamilyModified }">
                        </div>
                      </td>
                      <td style = "position: relative;">
                        <div class = "date datetimepicker">
                          <input type = "text" id = "TimeOfContact" class = "form-control" data-bind = "timePicker: TimeOfContact, attr : {'disabled' :  (ForDelete() == true || !Editable)}, event:{ click: $parent.contactWithFamilyModified }">
                        </div>
                      </td>
                      <td data-bind = "text: UserName"></td>
                      <td>
                        <textarea class = "form-control" rows = "4" form = "Remark" data-bind = "value: Remark, event:{ click: $parent.contactWithFamilyModified} , attr : {'disabled' : (ForDelete() == true || !Editable)}"></textarea>
                      </td>

                      <td class = "action-column">
                        <div class = "row-delete fa fa-share icon-flip" title = "@SharedResources.Index.Undo" style = "color: #096224; cursor: pointer;" data-bind = "click: $parent.contactWithFamilyUndoRemove, visible: ForDelete() == true"></div>
                        <div class = "row-delete fa fa-minus-circle icon-delete" title = "@SharedResources.Index.Delete" data-bind = "click: Editable && $parent.active() != 3 ? $parent.contactWithFamilyRemove : null, visible:  $parent.contactWithFamilyRemove, visible: ForDelete() == false, css:{'icon-disabled': Editable == false || $parent.active() == 3}"
                          style = "color: #9E0101;cursor: pointer;"></div>
                      </td>

                    </tr>
                  </tbody>
                </table>
                <div class = "row">
                  <div class = "col-sm-9">
                    <ul class = "pagination pagination-sm" style = "margin: 0">
                      <li data-bind = "css: { disabled:  contactWithFamilyCurrentPage() == 1 }, visible: contactWithFamilyTotalPages() > 0" class = "page-link disabled">
                        <a data-bind = "click: contactWithFamilyCurrentPage() > 1 ? contactWithFamilyRefreshData.bind($data, 1, null) : null, style: { cursor: contactWithFamilyCurrentPage() == 1 ? 'not-allowed' : 'pointer' }">&laquo;</a>
                      </li>
                      <li data-bind = "css: { disabled:  contactWithFamilyCurrentPage() == 1 }, visible: contactWithFamilyTotalPages() > 0" class = "page-link disabled">
                        <a data-bind = "click: contactWithFamilyCurrentPage() > 1 ? contactWithFamilyRefreshData.bind($data, contactWithFamilyCurrentPage()-1, null) : null, style: { cursor: contactWithFamilyCurrentPage() == 1 ? 'not-allowed' : 'pointer' }">&lsaquo;</a>
                      </li>
                      <!-- ko foreach: new Array(contactWithFamilyTotalPages()) -->
                      <li class = "page-item" data-bind = "css: { active:  $index()+1 == $parent.contactWithFamilyCurrentPage() }, visible: $index()+1 < $parent.contactWithFamilyCurrentPage()+3 && $index()+1 > $parent.contactWithFamilyCurrentPage()-3">
                        <a href = "#" class = "page-link" data-bind = "text: $index()+1, click: $parent.contactWithFamilyRefreshData.bind($data,$index()+1, null)"></a>
                      </li>
                      <!-- /ko -->
                      <li data-bind = "css: { disabled:  contactWithFamilyCurrentPage() == contactWithFamilyTotalPages() }, visible: contactWithFamilyTotalPages() > 0 " class = "page-link">
                        <a data-bind = "click: contactWithFamilyCurrentPage() < contactWithFamilyTotalPages() ? contactWithFamilyRefreshData.bind($data, contactWithFamilyCurrentPage()+1, null) : null, style: { cursor: contactWithFamilyCurrentPage() == contactWithFamilyTotalPages() ? 'not-allowed' : 'pointer' }">&rsaquo;</a>
                      </li>
                      <li data-bind = "css: { disabled:  contactWithFamilyCurrentPage() == contactWithFamilyTotalPages() }, visible: contactWithFamilyTotalPages() > 0 " class = "page-link">
                        <a data-bind = "click: contactWithFamilyCurrentPage() < contactWithFamilyTotalPages() ? contactWithFamilyRefreshData.bind($data, contactWithFamilyTotalPages(), null) : null, style: { cursor: contactWithFamilyCurrentPage() == contactWithFamilyTotalPages() ? 'not-allowed' : 'pointer' }">&raquo;</a>
                      </li>
                    </ul>
                  </div>
                  <div class = "col-sm-3">
                    <span class = "pull-right"> @SharedResources.Index.Record <span data-bind = "text: contactWithFamilyTotalItems"></span> </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    }
  </div>
</form>