<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="wrapper"> <div class="toggle_radio"> <input type="radio" class="toggle_option" id="first_toggle" name="toggle_option"> <input type="radio" checked class="toggle_option" id="second_toggle" name="toggle_option"> <label for="first_toggle"><p>First Button</p></label> <label for="second_toggle"><p>Second Button</p></label> <div class="toggle_option_slider"> </div> </div> <div class="row d-flex justify-content-between align-item-center"> <div class="box"> <p>Item </p> </div> <div class="box"> <video controls> <source src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> </div> <div class="box size-2"></div> </div> </div>

.box { width: 49%; min-height: 200px; padding-bottom: 20%; background: #ff7f50; flex-direction: space-between; padding: 20px; } video { width: 100%; } .box:last-child { background:#ff6b81; } .size-2 { width: 100%; margin: 10px auto; } .wrapper{ background: #497dd0; padding:100px; } .toggle_radio{ position: relative; background: rgba(255,255,255,.1); margin: 4px auto; overflow: hidden; padding: 0 !important; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; position: relative; height: 40px; min-width: 318px; width: 40%; } .toggle_radio > * { float: left; } .toggle_radio input[type=radio]{ display: none; /*position: fixed;*/ } .toggle_radio label{ font: 90%/1.618 "Source Sans Pro"; color: rgba(255,255,255,.9); z-index: 0; display: block; width: 48%; height: 40px; line-height: 2.618; margin: 3px 3px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; cursor: pointer; z-index: 1; /*background: rgba(0,0,0,.1);*/ text-align: center; /*margin: 0 2px;*/ /*background: blue;*/ /*make it blue*/ } .toggle_option_slider{ /*display: none;*/ /*background: red;*/ width: 48%; height: 34px; position: absolute; top: 3px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; -ms-transition: all .4s ease; transition: all .4s ease; } #first_toggle:checked ~ .toggle_option_slider{ background: rgba(255,255,255,.3); left: 1%; } #second_toggle:checked ~ .toggle_option_slider{ background: rgba(255,255,255,.3); left: 51%; }