Как лучше сверстать такой input?
НУ например так

<form>
    <div class="search">
     <input type="search" name="q">
     <input type="submit" value="Subscribe">
   </div>
  </form>

.search {
    border: 1px solid #000; 
    min-height: 20px; 
    padding:4px;
    border-radius:8px;
    display: flex;
    justify-content: space-between;
   }
   
input[type="search"] {
    border: none; 
    outline: none; 
    -webkit-appearance: none; 
    flex-grow: 2;
   }
   
input[type="submit"] {
    border: none; 
    height:40px;
    background: #2e6eff; 
    border-radius: 8px;
   }
кнопка абсолютом поверх input
https://jsfiddle.net/ntf05zsp/