Adding text input to search form on cardoor template

I am working with the cardoor template and I would like to add a text input that blends with the rest of the element to the “book a car” search search form here. I am unable to determine which CSS styling to apply to it for it to look like the rest of the forms input elements, other elements already present are a dropdown menu and date picker.
Thank you, your help will be greatly appreciated.

Hi there

Its an html template, you can do anything with it if you have experience with the HTML, please note, html templates require at least beginner experience to work with them

I am using your template as the frontend of my django web app, i’ve added the text input i want, but it looks out of place…

below is my form code:

<form action="index3.html">
                        <div class="pick-location bookinput-item">
                            <select class="custom-select">
                              <option selected="">State</option>
                              <option value="1">Dhaka</option>
                              <option value="2">Comilla</option>
                              <option value="3">Barishal</option>
                              <option value="3">Rangpur</option>
                            </select>
                        </div>

                        <div id="form-control" class="bookinput-item">

                        <input type="text" name="car_make" id="id_car_make" placeholder="Car Make">

                        </div>

                        <div class="bookinput-item">
                            <div role="wrapper" class="gj-datepicker gj-datepicker-bootstrap gj-unselectable input-group"><input id="startDate2" placeholder="Pick Date" data-type="datepicker" data-guid="cc7f2a18-535e-9e8c-2ac4-5bbfcb4ad5c6" data-datepicker="true" class="form-control" role="input" month="2" year="2021"><span class="input-group-append" role="right-icon"><span class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></span></span></div>
                        </div>

                        <div class="retern-date bookinput-item">
                            <div role="wrapper" class="gj-datepicker gj-datepicker-bootstrap gj-unselectable input-group"><input id="endDate2" placeholder="Return Date" data-type="datepicker" data-guid="2f33dccd-b7fd-36cd-4378-82c54bcdb676" data-datepicker="true" class="form-control" role="input" month="2" year="2021"><span class="input-group-append" role="right-icon"><span class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></span></span></div>
                        </div>

                        <div class="bookcar-btn bookinput-item">
                            <button type="submit">Book Car</button>
                        </div>
                    </form>

Thanks

The above code was copied from the chrome inspect menu. Below is what i have in my editor.

   <form action="index3.html">
                        <div class="pick-location bookinput-item">
                            <select class="custom-select">
                              <option selected>State</option>
                              <option value="1">Dhaka</option>
                              <option value="2">Comilla</option>
                              <option value="3">Barishal</option>
                              <option value="3">Rangpur</option>
                            </select>
                        </div>

                        <div id="form-control" class="bookinput-item">

                        <input type="text" name="car_make" id="id_car_make" placeholder="Car Make">

                        </div>

                        <div class="bookinput-item">
                            <input id="startDate2" placeholder="Pick Date" />
                        </div>

                        <div class="retern-date bookinput-item">
                            <input id="endDate2" placeholder="Return Date" />
                        </div>

                        <div class="bookcar-btn bookinput-item">
                            <button type="submit">Book Car</button>
                        </div>
                    </form>

Thanks in advance

Hey there

I need a link to see the problem, please provide direct link to the problem

Thanks

Hi, good day to you. I am currently working on a python local server, is there another way you can help me? Perhaps a Google meeting or zoom.
Thanks.

HI

Sorry but I need to see the page with the problem and URL is the only option in this case

Please note, the question requires beginner level of HTML/CSS, if you are working on such a complex project you should easily fix it?