Bootstrap Модальная форма: строки не ниже первой строки

Question

• 1000 вместо того, чтобы идти прямо под первым рядом строки «Имя». Прямо сейчас обе строки застряли под контейнером img.

#output_image {
  border-style: solid;
  float: left;
  position: relative;
}

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: relative;
  z-index: -1;
}

.label {
  opacity: 0;
}

.inputfile+label {
  position: relative;
  font-size: 2.5em;
  display: inline-block;
  color: black;
  text-align: center;
  padding: 2px 2px;
  text-decoration: none;
  float: left;
}

.inputfile:focus+label,
.inputfile+label:hover {}

.inputfile+label {
  cursor: pointer;
}

.iconplus {
  position: relative;
}

Answer 1

Я только что поменял местами часть вашего html и не включил свой собственный код в ваш style css или html файл.

#output_image {
  border-style: solid;
  float: left;
  position: relative;
}

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: relative;
  z-index: -1;
}

.label {
  opacity: 0;
}

.inputfile+label {
  position: relative;
  font-size: 2.5em;
  display: inline-block;
  color: black;
  text-align: center;
  padding: 2px 2px;
  text-decoration: none;
  float: left;
}

.inputfile:focus+label,
.inputfile+label:hover {}

.inputfile+label {
  cursor: pointer;
}

.iconplus {
  position: relative;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>



<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">
    Instagram Like
  </button>

<!-- Modal -->
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl  modal-dialog-right" role="document">
    <div class="modal-content">
      <div class="modal-header ">
        <h2 style="font-family: Lato; font-size:29pt; font-weight:bold;" class="modal-title " id="exampleModalLongTitle">Instagram</h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
      </div>

      <div class="modal-body">
        <form class="form-horizontal " id="step2">
          <div class="form-row" id="comNameAndTypeContainer">
            <img id="output_image" height=270px width=270px>

            <input class="inputfile" type="file" id="getFile" accept="image/*" onchange="preview_image(event)">
            <label for="getFile" <i class="fa fa-plus-circle iconplus" style="position:relative; top:23.1rem; right:3.45rem;"></i> </label>
            <!-- Staff name -->
            <div class="form-group col-md-5 align-items-center justify-content-center" id="comNameDiv">
              <label for="comName" class="fieldHeader"> Name</label>
              <input type="text" class="form-control" id="comName" name="comName" placeholder="Enter Name..." required>
              <!-- Staff identifier -->
              <div class="form-row" id="comNameAndTypeContainerr">
                <div class="form-group col" id="comIdentifierDiv">
                  <label for="comIdentifier" class="fieldHeader">Email/ID</label>
                  <input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter Email/ID..." required>
                </div>
                <div class="form-row" style="padding-left: 5px;" id="comNameAndTypeContainerrr">
                  <div class="form-group col" id="comIdentifierDiv">
                    <label for="comIdentifier" class="fieldHeader pl-0">ID date</label>
                    <input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter start ID..." required>
                  </div>
                  <div class="form-group col" id="comIdentifierDiv">
                    <label for="comIdentifier" class="text-white fieldHeader">ID date</label>
                    <input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter End ID..." required>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Create</button>
      </div>
    </div>
  </div>
</div>