JSFiddle - React, Tailwind, and code Playground

HTML

<header>
       <div class="wrapper">
        <div id="logo">logo</div>
            <input class="input01" type="text" placeholder="input01">
            <input class="input02" type="text" placeholder="input02">
        </div>       
<header>
<section class="content">
        <div class="wrapper">
            test123456abcdefghijklmnopqrsttest123456abcdefghijklmnopqrstefghijklmnopqrst
         </div> 
</section>

CSS

* {
  box-sizing:border-box;
}

.wrapper {
  position:relative;
  width: 500px;
  margin: 0 auto;
}
header .wrapper {
  background:#666;
}
  #logo {
        width: 200px;
        height: 200px;
        background-color: #888;
  }

    header input {
        position: absolute;
        right: 0;
        width: 100px;
        height: 20px;
        color:#131313;
        background-color: #888;
        border:none;
    }
    header input.input01{
        top: 0;
    }
    
    header input.input02{
        bottom: 0;
    }
    /* padding 左邊設logo寬，右邊設input寬 */
    .content .wrapper{
       padding: 0 100px 0 200px;        
       background-color:#555;
       word-break: break-all;
    }