span tag inside input group is not in a row, whats wrong with my styling (using bootstrap)

I have different long names in my span tag. The problem is that my input fields are not in a column. I want them to be among themselves (like the red line in the picture). Can u tell me what how to get the style i want.

So this is my code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">


<!--Site-->
    <div class="form-group">
      <div class="input-group">
      <span class="input-group-addon">Site</span>
        <input type="search" name="searchBy" id="searchBy" class="form-control" placeholder="Additional Info"/>
        <div class="input-group-btn">
          <div class="btn-group">
            <button class="btn btn-default dropdown-toggle dropdown-button" type="button" data-toggle="dropdown">
              <span>Search By</span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">=</a></li>
              <li><a href="#"><</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

<!--Net -->
    <div class="form-group">
      <div class="input-group">
      <span class="input-group-addon">Net</span>
        <input type="search" name="searchBy" id="searchBy" class="form-control" placeholder="Additional Info"/>
        <div class="input-group-btn">
          <div class="btn-group">
            <button class="btn btn-default dropdown-toggle dropdown-button" type="button" data-toggle="dropdown">
              <span>Search By</span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">=</a></li>
              <li><a href="#"><</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>


<!--Test-Nr. -->
    <div class="form-group">
      <div class="input-group">
      <span class="input-group-addon">Test-Nr.</span>
        <input type="search" name="searchBy" id="searchBy" class="form-control" placeholder="Additional Info"/>
        <div class="input-group-btn">
          <div class="btn-group">
            <button class="btn btn-default dropdown-toggle dropdown-button" type="button" data-toggle="dropdown">
              <span>Search By</span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">=</a></li>
              <li><a href="#"><</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

My questions: How can i get them in one line? how can i implement the same in bootstrap 4?

thanks in advance.