mobile inline elements

hello,

currently my website is displaying all the item in a column on mobile and it looks weird. There’s the checkbox, then the image and then the name & price. It’s very very weird and it takes a lot of space. I would like to have every single item and its price in the same line like in the screenshot :

https://ibb.co/sg5ZPTK

https://exclusivemod.com/product/herman-miller-aeron-chair/?v=11aedd0e4327

i tried the code you provided in another thread but it doesn’t work on my website. I’m using flatsome.

@media only screen and (max-width: 767px) {
    .woobt-products .woobt-product {
        display:flex;
        flex-direction: row;
        text-align: left;
        padding: 0 !important;
    }

    .woobt-products .woobt-product>div {
        padding: 10px 10px 10px 0 !important;
        width: auto !important;
        flex-basis: auto !important;
        max-width: 100% !important;
    }

    .woobt-products .woobt-product>div:first-child {
        padding-left: 0 !important;
    }
    
    .woobt-products .woobt-product>div:last-child {
        padding-right: 0 !important;
    }

    .woobt-products .woobt-product .woobt-thumb {
        text-align: left;
        width: 50px;
        flex-basis: 50px;
    }

    .woobt-products .woobt-product .woobt-thumb img {
        width: 50px;
    }

    .woobt-products .woobt-product .woobt-price {
        width: auto;
        flex-basis: 0;
    }

    .woobt-products .woobt-product .woobt-thumb img {
        display: block;
        margin: 0 auto;
    }

    .woobt-products .woobt-product .variations_form .variations {
        display: block;
    }

    .woobt-products .woobt-product .variations_form .variations .variation {
        max-width: 100%;
        margin-right: 0 !important;
    }

    .woobt-products .woobt-product .variations_form .variations .variation select {
        text-align-last: left;
    }
    
    .woobt-products .woobt-product .variations_form .variations .reset {
        display: none !important;
    }
}

THANK