Проблема в том, что <label> эльменец не имеет такой же width. Вы использовали .col-sm-3 на первых двух и .col-ms-5 на последних трех. Даже если вы используете один и тот же .col-* на всех них, они все равно будут иметь разную ширину, поскольку последние три являются вложенными. (Проверьте первый фрагмент кода)
Я предлагаю использовать контейнер для каждого из <label> элементов и применять .col-sm-auto и .col-12 непосредственно к контейнеру. Затем установите фиксированную ширину для <label>, чтобы имели одинаковую ширину . Вы можете использовать медиазапросы для установки различной ширины в зависимости от размера области просмотра.
Используйте .col-sm для контейнеров <input> и <textarea>, чтобы они занимали все доступное пространство. Используйте .col-12 на них для мобильных устройств.
@media (min-width: 576px) {
label {
width: 200px !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-body">
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary">
<label for="name" class="col-form-label">Name</label>
</div>
<div class="col-sm col-12">
<input type="text" class="form-control" id="name" disabled>
</div>
</div>
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary">
<label for="description" class="col-form-label">Description</label>
</div>
<div class="col-12 col-sm">
<textarea class="form-control" id="description" rows="5" disabled></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-12 col-sm-7">
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary ">
<label for="description" class="col-form-label">Rate</label>
</div>
<div class="col-12 col-sm">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary">
<label for="description" class="col-form-label">Start date</label>
</div>
<div class="col-12 col-sm">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary">
<label for="description" class="col-form-label ">End date</label>
</div>
<div class="col-12 col-sm">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="co-12 col-sm-5">
<div class="promotion-image-container">
<img src="https://via.placeholder.com/300x200" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/RzMzpR