Design: Align fields and labels

Hello everyone!

I am new to noloco and currently building my first app. This is an app where our mortgage consultants can process their cases. Every case has customers, real estate and a financing structure.
On the financing tab I`d like to build a little calculation “form”. It´s not a form in the noloco sense but it should just show some fields of the cases collection and provide the possibility to change some numbers for the calculation.

To make it clearer: Every case has a field for the purchase price, arollup field that summarizes the assets of each customer (equity), a field that takes the input how much of the customer`s assets should be used (equity employed) and a formula field, that calculates how much loan we need.

I´d like to show the calculation on the financing tab somehow like this:

Position Value
Customers’ assets (equity) 150000
Purchase price 500000
Equity employed 100000
Mortgage needed 400000

My problem is not the database structure but the visualization. If I use the fields’ labels, they are always displayed on top of the numbers. If I use a container and a text field to display the label left of the number, there is too much space between the label and the number and the numbers are still not aligned (see picture).

What are the ways to build a calculation form like this?
Any suggestions would be highliy appreciated!

Thx,
Thomas

1 Like