Change input size multiple inputs, Bootstrap 5 - bootstrap-5

Question

I'm trying to change the size of inputs in a multiple-input row (Bootstrap 5). I can change the label size but not the two inputs next to it. I want one to be col-7 and the other col-1. But the two inputs stay the same in size (see screenshot).
Here is the code:
<div class="row">
<!-- left column -->
<div class="col-5">
<div class="input-group my-3">
<label class="col-4 col-form-label"><?php echo $label['client-name']; ?>: *</label>
<input type="text" class="form-control col-7" name="clientname" value="<?php echo (isset($clientname)? $clientname : ""); ?>" />
<input type="text" class="form-control col-1" name="clientID" value="<?php echo (isset($clientID)? $clientID : ""); ?>" />
</div>

Answer 1

you can use width for input text.use this code:
<div class="row">
<!-- left column -->
<div class="col-5">
<div class="input-group my-3">
<label class="col-form-label">
clientname:
</label>
<div class="d-flex">
<input type="text" class="form-control w-25" name="clientname"
value="" />
<input type="text" class="form-control " name="clientID"
value="" style="width: 10%;" />
</div>
</div>
</div>

Answer 2

You should put your label in a separated column giving it a width like I did here so that the label column always takes col-3 and the content column always takes col-9.
Then you can treat the content column as another row and split it in 7-2 (but the bootstrap canonic layout would expect 12 cols in total).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3">
<label class="col-4 col-form-label">Label</label>
</div>
<div class="col-9">
<div class="row input-group">
<div class="col-7">
<input
type="text"
class="form-control"
name="clientname" value="***" />
</div>
<div class="col-2">
<input
type="text"
class="form-control"
name="clientID"
value="***" />
</div>
</div>
</div>
</div>