HTML checkbox prepended to textbox and their sizes

Here is my HTML code:

 <div class="input-group mb3">
                    <div class="input-group-prepend">
                        <div class="input-group-text">
                        
                            <input type="checkbox", value="clicked", name="c" checked>
                        
                        </div>
                    </div>
                    <input type="text" value="" class="form-control">
                </div>

I prepended checkboxes before the textboxes, yet their sizes is not same as you see.

Do I have to change their height(maybe width) values in order to make them equal or do I miss something else? By the way I am using CSS(I am a newbie to HTML, do not be harsh please :D ). Could it be relevant with that or it' s sources?

CSS:

  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

And script:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

Thanks!