JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <navl>
        <ul>
            <li><img src="" alt="logo"></li>
            <li><input type="search"></li>
            <li><img src="" alt="hit"></li>
        </ul>
        </navl>

        <navr>
            <ul>
                <li><img src="" alt=""dp></li>
                <li>Name</li>
                <li>i1</li>
                <li>i2</li>
                <li>i3</li>
                <li>i4</li>
                <li>i5</li>
            </ul>
        </navr>
    </nav>



</body>
</html>

CSS

*{
    padding: 0vw;
    margin: 0vw;
}

nav{
    background-color: rgba(52, 52, 146, 0.829);
    display: inline-flex;
    justify-content: space-around;
    width: 100vw;
    height: 45px;
}

ul {
    display: inline-flex;
    list-style-type:none;
}

navl{
    border-color:red ;
    vertical-align: middle;
    margin: auto;
}
navr{
    vertical-align: middle;
    margin: auto;

}