JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m"
				data-sap-ui-theme="sap_bluecrystal">
		</script>

		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("learning");
				var view = sap.ui.view({id:"idfirst1", viewName:"learning.first", type:sap.ui.core.mvc.ViewType.JS});
				view.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

CSS

.label1{
	color: rgb(4,157,225) !important;
	width:"100px",
	margin-top: 18px;
	margin-bottom: 5px;	
	font-weight: bold !important;
	font-size: 15px !important;
}

.label2{
	margin-bottom: 5px !important;
	margin-top:3px !important;
	color: rgb(0,176,80) !important;
	font-weight: bold !important;
	font-size: 16px !important;
}

JavaScript

var searchField = new sap.m.SearchField({
			    	  text:"Search",
              layoutData: new sap.m.FlexItemData({growFactor: 1})
			       });
             
vbox = new sap.m.FlexBox({
			items:[
new sap.m.Label({text:"2000",width: "50px", design:"Bold", layoutData: new sap.m.FlexItemData({
alignSelf: sap.m.FlexAlignSelf.Center})}),
			       searchField
			       ]
		});
		
		vbox.placeAt("content");