How to adjust width of elements on toolbar through a css?

Hi,

I have toolbar which is having elmeents on it of varying length of labels and their values. However, I see there is significant amount of small width getting wasted between the label names and their corresponding values.

How can I write a css to reduce the space between a labelname: labelvalue so that to ensure that the space between each pair of such name:value is constant and also the gap between a 'labelname:" and the beginning of its value is constant.

My snippet is here : https://webix.com/snippet/94e53db5
If I do an inspect element on each item on the toolbar , I find in the element.style by default they are consuming a longer space (about 40px) than required. If the label name is shorter then it consumes a lot of space.

An example demonstrating the solution would be great.

Thanks

Changing component’s size with CSS may cause a sizing issue.

In such use-case, I would rather suggest using the ui.template, as this component was created to render any HTML, so the content can be easily customized. For example https://webix.com/snippet/77f23a9b