JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="logo">Лого</div>
    <div class="text">Текст</div>
    <div class="menu">Меню</div>
</div>

CSS

.wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;
}
.logo {grid-column: 1/3; grid-row: 1;}
.text {grid-column: 3/5; grid-row: 1;}
.menu {grid-column: 2/4; grid-row: 2;}
/* --------------- Mobile L-425px --------------- */
@media all and (max-width: 425px) {
    .wrap {grid-template-rows: 1fr 1fr;}
    .logo {grid-column: 1/3; grid-row: 1;}
    .menu {grid-column: 3/5; grid-row: 1;}
    .text {grid-column: 2/4; grid-row: 2;}
    .wrap div {overflow: hidden;}
}
/* --------------- ************ ------------------ */
.wrap {background: #3c78bf;}
.wrap div {
    font-size: 24px; 
    font-family: 'Roboto', sans-serif;
    font-weight: bold; 
    color: #131619;
    background: #f1f1f1;
}
.wrap, .wrap div {
    padding: 10px; 
    text-align: center;
    border: 1px solid #5492ca;
    border-radius: 5px;
}