How to group elements NativeScript UI? - nativescript

Question

How to group elements in block?
<Label class="sidedrawer-header-image fa" text=""></Label>
<Label class="sidedrawer-header-brand" text="User Name"></Label>
<Label class="footnote" text="username#mail.com"></Label>
I need to do something like:
<div class="inline">
<Label class="sidedrawer-header-image fa" text=""></Label>
<Label class="sidedrawer-header-brand" text="User Name"></Label>
<Label class="footnote" text="username#mail.com"></Label>
</div>
<div class="inline">
<Label class="sidedrawer-header-image fa" text=""></Label>
<Label class="sidedrawer-header-brand" text="User Name"></Label>
<Label class="footnote" text="username#mail.com"></Label>
</div>
<div class="inline">
<Label class="sidedrawer-header-image fa" text=""></Label>
<Label class="sidedrawer-header-brand" text="User Name"></Label>
<Label class="footnote" text="username#mail.com"></Label>
</div>
Where <div class="inline"> is inline block

Answer 1

Replace your div with StackLayout and set the orientation as horizontal.
<StackLayout orientation="vertical">
<StackLayout orientation="horizontal">
<Label class="sidedrawer-header-image fa" text=""></Label>
<Label class="sidedrawer-header-brand" text="User Name"></Label>
<Label class="footnote" text="username#mail.com"></Label>
</StackLayout>
<StackLayout orientation="horizontal">
<Label class="sidedrawer-header-image fa" text=""></Label>
<Label class="sidedrawer-header-brand" text="User Name 1"></Label>
<Label class="footnote" text="username#mail.com"></Label>
</StackLayout>
<StackLayout orientation="horizontal">
<Label class="sidedrawer-header-image fa" text=""></Label>
<Label class="sidedrawer-header-brand" text="User Name"></Label>
<Label class="footnote" text="username2#mail.com"></Label>
</StackLayout>
</StackLayout>
You can give it a try in playground here.
You mentioned in your question that you want to use inline-block (Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.), then you should use GridLayout, it allows you to choose row and columns for you elements. The width of a column and the height of a row can be specified as an absolute amount of pixels, as a percentage of the available space or automatically:
Absolute: Fixed size of pixels.
Star (*): Takes as much space as available (after filling all auto and fixed sized columns), proportionally divided over all star-sized columns. So 3/7 means the same as 30/70.
Auto: Takes as much space as needed by the contained child element(s).
<GridLayout columns="*, *, *" rows="*, *, *" width="400" height="400"
backgroundColor="lightgray">
<Label class="sidedrawer-header-image fa" text="" row="0"
col="0"></Label>
<Label class="sidedrawer-header-brand" text="User Name" row="0"
col="1"></Label>
<Label class="footnote" text="username#mail.com" row="0" col="2"></Label>
<Label class="sidedrawer-header-image fa" text="" row="1"
col="0"></Label>
<Label class="sidedrawer-header-brand" text="User Name" row="1"
col="1"></Label>
<Label class="footnote" text="username#mail.com" row="1" col="2"></Label>
<Label class="sidedrawer-header-image fa" text="" row="2"
col="0"></Label>
<Label class="sidedrawer-header-brand" text="User Name" row="2"
col="1"></Label>
<Label class="footnote" text="username#mail.com" row="2" col="2"></Label>
</GridLayout>