JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
        <h1>Chania</h1>
    </div>

    <div class="row">

        <div class="col-3 menu">
            <ul>
                <li>The Flight</li>
                <li>The City</li>
                <li>The Island</li>
                <li>The Food</li>
            </ul>
        </div>

        <div class="col-1">
            <img src="https://assets.bwbx.io/images/users/iqjWHBFdfxIU/i7T6Dp0ts0sQ/v1/-1x-1.jpg" />
        </div>
        <div class="col-1">B</div>
        <div class="col-1">C</div>
        <div class="col-1">D</div>
        <div class="col-1">E</div>
        <div class="col-1">F</div>
        <div class="col-1">G</div>
        <div class="col-1">H</div>
        <div class="col-1">I</div>
        <div class="col-1">J</div>
        <div class="col-1">K</div>
        <div class="col-1">L</div>
  
    </div>

CSS

* {
            box-sizing: border-box;
        }

        .row::after {
            content: "";
            clear: both;
            display: table;
        }

        [class*="col-"] {
            float: left;
            padding: 15px;
        }

        .col-1 {
            width: 58px;
            background-color: chocolate;
            margin: 12px;
        }

       

        html {
            font-family: "Lucida Sans", sans-serif;
        }

        .header {
            background-color: #9933cc;
            color: #ffffff;
            padding: 15px;
        }

        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .menu li {
            padding: 8px;
            margin-bottom: 7px;
            background-color: #33b5e5;
            color: #ffffff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        }

            .menu li:hover {
                background-color: #0099cc;
            }

        body {
            background-color: darkgray;
        }

JavaScript

$(document).ready(function () {

            var screenSize = screen.width;
            //alert('type='+jQuery.type(screenSize));
            if (screenSize == 1024) {
                $(".col-1").css("width", "58px");
                alert('width success!');

                $(".col-1").css("margin", "12px;");
                alert('margin success!');



            }

        });