JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pp-footer1-fill4">
   <div class="pp-footer1-fill5">
       <input placeholder="Email" type="text" autocorrect="off" autocapitalize="none" />
   </div>
   <div class="pp-footer1-fill5">
       <a href="#">Berlangganan</a>
   </div>
</div>

CSS

.pp-footer1-fill4{
  display: table;
  border: 2px solid white;
  border-radius: 8px;
  background-color: #ff0000;
}
.pp-footer1-fill5{
  display: table-cell;
  background-color: #ff0000;
  color: white;
}
input{
  height: 40px;
  border-right: 2px solid white;
  border-left: 0px;
  border-top: 0px;
  border-bottom: 0px;
  font-size: 18px;
  padding: 0 5px;
  background-color: #ff0000;
  color: white;
}
.pp-footer1-fill5 a{
  font-size: 18px;
  border: none;
  max-width:160px;
  padding: 7.5px 5px;
  transition: all .5s ease;
  height: 100%;
  text-decoration: none;
}
.pp-footer1-fill5:hover{
  text-decoration: none;
  background-color: white;
  color: #ff0000;
  transition: all .5s ease;
}
div.pp-footer1-fill4 input[type="text"]{
  color: white;
}