Adjust two text box width

Question

I'm a beginner of html form designer, I would like make a simple input-group in the html, which the output which text box width is different That mean which surname textbox is shorter and FullName is longer can you advise how to do it ?

<div class="row h-100">
 <div class="col">
   <div class="input-group">
          <div class="input-group-prepend">
              <span class="input-group-text" id="">First and last name</span>
           </div>
           <input type="text" id="surname" class="form-control" style="width:80px">
           <input type="text" id="FullName" class="form-control" style="width:100%">
     </div>
  </div>

Answer 1

Try this.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row h-100">
  <div class="col">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="">First and last name</span>
      </div>
      <input type="text" id="surname" class="form-control" placeholder="Mr" style="width:80px;flex-grow: 0;">
      <input type="text" id="FullName" class="form-control" placeholder="">
    </div>
  </div>