Btukfyl

I have below markup in html using bootstrap 4 which is being displayed in single row while the same is getting broken into two in IE Edge

<form class="form-inline" style="margin-top:10px;">

<label for="text" class="mr-sm-2">HOUR</label>

input type="text" class="form-control mb-2 mr-sm-2" id="HOUR">

<label for="text" class="mr-sm-2">MINUTE</label>

<input type="text" class="form-control mb-2 mr-sm-2" id="MINUTE">

<label for="text" class="mr-sm-2">SECONDS</label>

<input type="text" class="form-control mb-2 mr-sm-2" id="SECONDS">



<div class="dropdown" style="margin-left:20px;">

<button type="button" id="AMPM" class="btn btn-primary dropdown-toggle" style="width:160px;" data-toggle="dropdown">

                    AM/PM

</button>

<div class="dropdown-menu" id="SelectAMPM">

<a class="dropdown-item" href="#">AM</a>

<a class="dropdown-item" href="#">PM</a>

</div>

</div>

</form>

How to display entire form in one row in Internet Explorer and Edge? What bootstrap 4 classes needs to be added?

I've tested your code on my side and the form shows in one row in latest Edge and IE.

I wonder that what version of IE/Edge you've used to display two rows.

Besides, I would like to tell that when you use inline attribute the field goes from horizontal to vertical due to not enough space/width. You could see this from the link:
https://www.w3schools.com/bootstrap4/bootstrap_forms.asp

I've modified parts of the style by using the class form-control.Maybe you could refer to.

<form class="form-inline">

    <div class="form-group">

        <label for="text">HOUR</label>

        <input id="HOUR" class="form-control input-group-lg" type="text" />

    </div>

    <div class="form-group">

        <label for="text">MINUTE</label>

        <input id="MINUTE" class="form-control input-group-lg" type="text" />

    </div>

    <div class="form-group">

        <label for="text">SECONDS</label>

        <input id="SECONDS" class="form-control input-group-lg" type="text" />

    </div>

    <div class="form-group">

        <div class="dropdown" style="margin-left:20px;">

            <button type="button" id="AMPM" class="btn btn-primary dropdown-toggle" style="width:160px;" data-toggle="dropdown">

                AM/PM

            </button>

            <div class="dropdown-menu" id="SelectAMPM">

                <a class="dropdown-item" href="#">AM</a>

                <a class="dropdown-item" href="#">PM</a>

            </div>

        </div>

    </div>

</form>