JSFiddle - React, Tailwind, and code Playground

HTML

<header>
       <div class="wrapper">
        <div id="logo">logo</div>
            <span class="inputLine input01">INPUT1<input type="text" placeholder="input01"></span>
            <span class="inputLine input02">INPUT1<input type="text" placeholder="input02"></span>
        </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 .inputLine {
  position: absolute;
  right: 0;
  display: inline-block;
}
header .inputLine input {
  border:none;
  background-color: #888;
  color:#131313;
  width: 100px;
  height: 20px;
}
header .input01{
  top: 0;
}

header .input02{
  bottom: 0;
}
/* padding 左邊設logo寬，右邊設input寬 */
.content .wrapper{
  padding: 0 100px 0 200px;        
  background-color:#555;
  word-break: break-all;
}