Why is my input box not consistent? Every time I add it, the width increases. I understand it's because of the 'col' control but it's creating a messy layout as shown in the image below
https://i.sstatic.net/Q1PHL.png
This is the code I'm using:
I am using CSS with
.flex{
display: flex;
}
I want the symbol to stay beside the input field, but they are getting combined. Is there a way to make the input box consistent?
const $container = $('#contactContainer')
$(".remove").eq(0).hide()
$container.on('click', ".ar", function(e) {
const add = $(this).is(".add");
const $phones = $container.find(".phone");
const len = $phones.length;
if (add) {
const $newPhone = $phones.eq(0).clone(true)
$newPhone.find("[name=contact]")
.attr("id", `new_${$phones.length}`)
.val("");
$container.append($newPhone);
$newPhone.find(".add").remove()
$newPhone.find(".remove").show()
} else {
$(this).closest(".phone").remove()
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f011f03">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="form-group row">
<label for="contact" class="col-2 col-form-label">Contact:</label>
<style>
.flex{ display: flex; }
</style>
<div class="col-4" id="contactContainer">
<div class="flex phone" style="margin-bottom:5px;">
<input style="margin-right: 10px;" id="validationcontact" name="contact" type="text" class="form-control" pattern="\b\d{8}\b" required>
<input type="button" class="ar add" value="Add more field!" style="cursor: pointer;">
<span class="ar remove"><label style="cursor: pointer; padding-top: 5px;"><i data-feather="minus">-</i></label></span>
</div>
</div>
</div>