JSFiddle - React, Tailwind, and code Playground

HTML

<div id="containter">
        <img src="http://cf.badassdigest.com/_uploads/images/28150/alternate_oscars_header__index.jpg"/>
        <div id="left-column"> This is the left column. Staphp dap trap dap tyryt Staphp dap trap dap</div>
        <div id="right-column"> make blablabala and kitcat Staphp dap trap dap tyryt  Staphp dap trap dap tyryt </div>
        </div>

CSS

#container {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
}
#left-column {
    width: 400px;
    float: left;
    background: red; 
}
#right-column {
    width: 200px;
    float: right;
    background: green;
}

@media screen and (max-width: 599px) {
    #container {
        width:100%
    }
    #left-column {
        width: 70%;
        float: left;
        background: red; 
    }
    
    #right-column {
        width: 30%;
        float: right;
        background: green;
    }
    
    img {
        width: 100%;
    }
}
    
@media screen and (max-width: 350px) {
    #left-column {
        width: 100%;
        background: red; 
    }
    
    #right-column {
        width: 100%;
        background: green;
    }
}