JSFiddle - React, Tailwind, and code Playground

HTML

<body>
   <div id="header">
        <div id="one"></div>
        <div id="two"></div>     
   </div>
                
</body>

CSS

#header{
            background-color:#252323;
            margin: 0 auto 0;
            width: 1366px;
            height: 60px;
            }
            #header:before{
            display: inline-block;
            width: 100%;
            vertical-align: middle;
            content: "";
            }
            #one{
            width:40px;
            height: 20px;
            background-color: red;
            float:left;
            margin-left: 205px;
            vertical-align: middle;
            }
            #two{
            width: 220px;
            height: 20px;
            float:right;
            background-color: green;
            margin-right: 195px;
            vertical-align: middle;
            }
            @media screen and (max-width: 480px){

            #one{
                margin-left: 1px;
            }

            #two{
            width: 10px;
            margin-right: 1px;
            }

        }