style> /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { .soap{ width: 100%; } .soap-inner{ width: 100%; float:left; line-height: 30px; margin-bottom: 5px; text-align: center; } .text{ line-height: 30px; display: inline-block; vertical-align: middle; margin-top: -15px; } .operator{ width: 35px; height: 30px; line-height: 30px; display: inline-block; } } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { .soap{ width: 100%; } .soap-inner{ width: 100%; float:left; line-height: 30px; margin-bottom: 5px; text-align: center; } .text{ line-height: 30px; display: inline-block; vertical-align: middle; margin-top: -10px; } .operator{ width: 35px; height: 30px; line-height: 30px; display: inline-block; } } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) { .soap{ width: 500px; margin: 0 auto; } .soap-inner{ width: 50%; float:left; line-height: 30px; margin-bottom: 10px; text-align: left; } .soap-inner:odd{ padding-left: 20px; width: calc(50% -20px); } .text{ line-height: 30px; display: inline-block; margin-top: 0px; } .operator{ width: 35px; height: 30px; float:left; margin-left: 30px; } }