JSFiddle - React, Tailwind, and code Playground

by Shoup

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>

<form class="well pad12">
	<div class="container4">
        <div class="con4col">
	        <div>
                <label for="timezone">Timezone:</label>
                <select class="f-timezone" name="f-timezone" multiple="multiple">
                    <option value="-12.0">GMT-12</option>
                    <option value="-11.0">GMT-11</option>
                    <option value="-10.0">GMT-10</option>
                    <option value="-9.0">GMT-9</option>
                    <option value="-8.0">GMT-8</option>
                    <option value="-7.0">GMT-7</option>
                    <option value="-6.0">GMT-6</option>
                    <option value="-5.0">GMT-5</option>
                    <option value="-4.0">GMT-4</option>
                    <option value="-3.0">GMT-3</option>
                    <option value="-2.0">GMT-2</option>
                    <option value="-1.0">GMT-1</option>
                    <option value="0.0">GMT</option>
                    <option value="1.0">GMT+1</option>
                    <option value="2.0">GMT+2</option>
                    <option value="3.0">GMT+3</option>
                    <option...

CSS

.pad12 {
  padding: 0 12px;
  overflow-x: auto;
}


.container4 {
  width: 1500px;
  display: block;
}

.container4 > .con4col {
  width: 350px;
  display: inline-block;
  vertical-align: top;
}

.con4col > div {
  display: block;
  width: 100%;
  height: 34px !important;
  margin-bottom: 3px;
}

.con4col > div > select {
  width: 180px !important;
  height: 28px !important;
  padding: 2px;
  padding-left: 6px;
}

.con4col > div > label {
  display: inline-block;
  min-width: 80px !important;
  width: 80px !important;
  margin-right: 0px !important;
  font-size: 0.88rem;
  margin-bottom: 15px;
}

.doubleInput {
  display: inline-block;
  width: 200px;
  margin: 0 !important;
  padding: 0 !important;
}

.doubleInput > input {
  width: 90px;
  height: 28px !important;
  margin: 0 !important;
  padding: 2px;
  padding-left:  3px;
}

JavaScript

$('.f-timezone').multiselect({

			numberDisplayed: 1,
			onChange: function (e, c) {
				e.checked = c;
			},
      onDropdownShown: function (event) {
        $('.pad12').css('overflow-y', 'visible')
    	},
    	onDropdownHidden: function (event) {
        $('.pad12').css('overflow-x', 'auto')
        $('.pad12').css('overflow-y', 'auto')
    	}
});