.tab-motor_outputs { } .tab-motor_outputs .left.motors { float: left; margin-right: 50px; width: calc(50% - 50px); } .tab-motor_outputs .right.servos { float: left; width: 50%; } .tab-motor_outputs .titles { height: 20px; } .tab-motor_outputs .titles li { float: left; width: calc((100% / 9) - 10px); /* - (margin) */ margin-right: 10px; text-align: center; } .tab-motor_outputs .servos .titles li { width: calc((100% / 8) - 10px); /* - (margin) */ } .tab-motor_outputs .titles .active { color: green; } .tab-motor_outputs .m-block { float: left; width: calc((100% / 9) - 12px); /* - (margin, border) */ height: 160px; margin-right: 10px; border: 1px solid silver; background-color: #e9e9e9; } .tab-motor_outputs .servos .m-block { width: calc((100% / 8) - 12px); /* - (margin, border) */ } .tab-motor_outputs .indicator { float: left; width: 100%; } .tab-motor_outputs p { margin-top: 20px; padding: 5px; border: 1px dotted silver; } .tab-motor_outputs .motor_testing { display: none; } .tab-motor_outputs .motor_testing .left { margin-right: 50px; width: calc(50% - 50px); } .tab-motor_outputs .motor_testing .sliders { margin-top: 20px; } .tab-motor_outputs .motor_testing .sliders input { -webkit-appearance: slider-vertical; width: calc((100% / 9) - 3px); /* - (width / 9 elements, not sure about -3 */ } .tab-motor_outputs .motor_testing .values { margin-top: 5px; } .tab-motor_outputs .motor_testing .values li { float: left; width: calc((100% / 9)); text-align: center; } .tab-motor_outputs .motor_testing .notice { float: left; width: calc(50% - 12px); /* - (padding, border) */ margin-top: 20px; padding: 5px; border: 1px dotted silver; } .tab-motor_outputs .motor_testing .notice input[type="checkbox"] { margin-left: 5px; vertical-align: middle; }