How to put a line break in sapui5 text or input box? - sapui5

Question

I cant seem to find a way to put the <DatePicker id="DP1" placeholder="Enter Date" value="{/recipient2/name}" change="handleChange" class="sapUiSmallMarginBottom"/> and <Select selectedKey="{/recipient3/name}" id="input-c" forceSelection="false">
in new line. They show at the same line but I would like them in two different lines.
<mvc:View controllerName="Workspace.controller.App" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form">
<Page title="{i18n>homePageTitle}">
<content>
<Panel width="auto" class="sapUiResponsiveMargin">
<Image src="https://www.enggwave.com/wp-content/uploads/2016/11/Sopra-Steria-Logo.png" width="100px" height="100px"
class="sapUiResponsiveMargin"></Image>
<Text text="Plot No. 20 21 Seaview Special Economic Zone"/>
<Image src="https://upload.wikimedia.org/wikipedia/en/thumb/0/02/Sopra_Steria_logo.svg/1280px-Sopra_Steria_logo.svg.png" width="500px"
height="100px" class="sapUiResponsiveMargin"></Image>
</Panel>
<Panel>
<f:SimpleForm id="SimpleFormChange354" width="100%" minWidth="1024" maxContainerCols="2" editable="true" layout="ResponsiveGridLayout"
title="FORM" labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1" class="editableForm">
<f:content>
<Label text="NAME : " labelFor="input-a" design="Bold"/>
<Input id="input-a" placeholder="Enter Name" value="{/recipient1/name}" valueLiveUpdate="true" width="100%" required="true"/>
<Label text="DATE : " labelFor="input-b" design="Bold"/>
<DatePicker id="DP1" placeholder="Enter Date" value="{/recipient2/name}" change="handleChange" class="sapUiSmallMarginBottom"/>
<InputListItem label="Country" >
<Select selectedKey="{/recipient3/name}" id="input-c" forceSelection="false">
<core:Item key="Greece" text="Greece"/>
<core:Item key="Mexico" text="Mexico"/>
<core:Item key="Norway" text="Norway"/>
<core:Item key="New Zealand" text="New Zealand"/>
<core:Item key="Netherlands" text="Netherlands"/>
</Select>
</InputListItem>
<Button text="{i18n>showHelloButtonText}" press="onShowHello"/>
</f:content>
</f:SimpleForm>
</Panel>
</content>
</Page>
</mvc:View>

Answer 1

Try putting the two in a Vbox
<Vbox>
<DatePicker id="DP1" placeholder="Enter Date" value="{/recipient2/name}"
change="handleChange" class="sapUiSmallMarginBottom"/>
<InputListItem label="Country" >
<Select selectedKey="{/recipient3/name}" id="input-c"
forceSelection="false">
<core:Item key="Greece" text="Greece"/>
<core:Item key="Mexico" text="Mexico"/>
<core:Item key="Norway" text="Norway"/>
<core:Item key="New Zealand" text="New Zealand"/>
<core:Item key="Netherlands" text="Netherlands"/>
</Select>
</InputListItem>
<Button text="{i18n>showHelloButtonText}" press="onShowHello"/>
</Vbox>