a { color: #229100; } a.button{ background-color: #535353; border: none; border-radius: 0.5em; color: white; text-align: center; text-decoration: none; display: inline-block; padding: 10px; cursor: pointer; } iframe { border-radius: 10px; border-color: #229100; width: 100%; height: inherit; } img{ width: 100%; border-radius: 10px; border-color: #229100; } .hide{ display: none; } .t{ color: #fff; } .wrapper { border-radius: 2em; padding: 2em; background: #535353; margin-bottom: 2em; width: 55%; height: 30vh; margin: auto; overflow: hidden; /* add this to contain floated children */ } .first { width: 59%; height: inherit; float: left; /* add this */ } .second { width: 40%; height: inherit; float: right; /* add this */ } /** Switch -------------------------------------*/ .switch input { position: absolute; opacity: 0; } /** * 1. Adjust this to size */ .switch { display: inline-block; font-size: 20px; /* 1 */ height: 1em; width: 2em; background: #bdb9a6; border-radius: 1em; margin-right: 10px; } .switch div { height: 1em; width: 1em; border-radius: 1em; background: #fff; box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3); -webkit-transition: all 300ms; -moz-transition: all 300ms; transition: all 300ms; } .switch input:checked + div { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }