Angular - Show fields side by side - html

Question

I am trying to show the fields in the angular side by side no matter what I do it is still showing like below
And below is my html component
<div id="report-prj-search">
<div class="dx-fieldset" >
<div class="dx-field">
<div class="dx-field-label">ShipTo Account</div>
<div class="dx-field-value">
<dx-select-box [dataSource]="ShipmentList" displayExpr="customer_shipto_name" (onValueChanged)="onValueChanged($event)" ></dx-select-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Purchase Order</div>
<div class="dx-field-value">
<dx-select-box [dataSource]="purchaseOrder" displayExpr="customer_purchase_order" ></dx-select-box>
</div>
</div>
<div class="dx-field">
<dx-button (onClick)="click($event)">Filter</dx-button>
</div>
</div>
</div>

Answer 1

I've refactored your HTML slightly so that you can use CSS Flexbox:
<div id="report-prj-search">
<div class="dx-fieldset flex-column">
<div class="flex-row-container">
<div class="dx-field flex-row">
<div class="dx-field-label">ShipTo Account</div>
<div class="dx-field-value">
<select></select>
</div>
</div>
<div class="dx-field flex-row">
<div class="dx-field-label">Purchase Order</div>
<div class="dx-field-value">
<select></select>
</div>
</div>
</div>
<div class="dx-field">
<button (onClick)="click($event)">Filter</button>
</div>
</div>
</div>
Use Flexbox in your CSS:
.dx-fieldset.flex-column {
display: flex;
flex-direction: column;
}
.flex-row-container {
display: flex;
flex-direction: row;
}
.dx-field.flex-row {
display: flex;
flex-direction: row;
}
Here's the flexbox guide that I've used several times in the past:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

You need to style the component as some sort of component that is in the same line, such as display: inline or a wrapper which is display: flex and flex-direction: row or display: inline-block!