.rates {background-color: #3c6695; width: 240px; color: #fff; padding: 30px; box-sizing: border-box;}
.rates .header {border-bottom: 1px solid #8db0d8; font-size: 27px; line-height: 27px; height: 30px; text-transform: uppercase; font-family: "Raleway", Arial, sans-serif; font-weight: 300; margin: 0 0 5px 0;}
.rates .column-1 {float: left;}
.rates .column-2 {float: right;}
.rates .rates {padding: 0;}
.rates .rates .rate {width: 180px; height: 30px; padding: 0; line-height: 30px;}
.rates .rates .rate.header {border-bottom: 1px solid #8db0d8; margin: 0 0 5px 0;}
.rates .rates .rate div:first-child {width: 90px; float: left;}
.rates .rates .rate div:last-child {width: 90px; text-align: right; float: right;}

@media all and (max-width: 500px) {
    .rates {width: 100%; padding: 10px;}
    .rates .header {display: none;}
    .rates .rates .rate {width: 100%; height: auto; line-height: 20px; font-size: 20px;}
    .rates .rates .rate div:first-child {width: 50% !important; max-width: 50% !important; float: left !important; font-weight: bold;}
    .rates .rates .rate div:last-child {width: 50% !important; max-width: 50% !important; float: right !important;}
    .rates .column-1 {width: 50% !important; max-width: 50% !important; float: left !important; padding: 0 !important;}
    .rates .column-2 {width: 50% !important; max-width: 50% !important; float: right !important; padding: 0 !important;}
}