h6 {
    display: inline-block;
    
}
.mobileAreas select {
   
    min-width: 80px; /* needed to overwrite form control*/
    max-width:200px;
    display: inline-block;
}

/*To utilize this, you will need to add*/
@media (max-width: 1000px) {
    .hiddenColumn {
        display: none;
    }
    .mobileAreas h1 {
        font-size: 40px;
    }
    .mobileAreas h6 {
        font-size: 15px;
        display: inline-block;
    }
    .mobile-table {
        line-height: normal;
    }
   
    .mobile-table th, .mobile-table tr td {
        margin: 0;
        padding: 2px;
        line-height: normal;
        font-size: 8px
    }
    
    .mobile-table button {
        height: 20px;
        padding: 0px 2px 0px 2px;
        font-size: 6px;
    }

    .mobile-table tbody td {
        vertical-align: middle;
    }


    .mobileAreas {
        font-size: 80%;
    }

    .mobileAreas select {
        line-height: 1em;
        font-size: 80%;
        width: 100px;
        margin: 0px 0px;
        min-width: 100px; /* needed to overwrite form control*/
        display:inline-block;
    }

    .mobileAreas select.form-control:not([size]):not([multiple]) {
        height: 30px !important;
    }
    .mobileAreas input.btn {
        font-size: 90%;
    }

    .mobile-list li {
        font-size: 10px;
    }
    div.mobile-list div.padding-shrink{
        font-size: 10px;
        padding:2px 2px 2px 2px;
    }
}
@media (max-width: 500px) {

    .mobileAreas h1 {
        font-size: 30px;
    }
    .homePage > h3 {
        font-size: 20px;
    }
    .mobileAreas h6 {
        font-size: 10px;
    }
    .mobileAreas {
        font-size: 80%;
    }
   /* .mobileAreas select {
        font-size: 8px;
    }*/
    select.form-control:not([size]):not([multiple]) {
        height: 20px !important;
    }

    .mobileAreas input.btn {
        /*font-size: 80%;*/
        width: 40px;
    }

}