Custom Layout with Form [Text Field Caption and required indicator]

We are developing some Form, but using CustomLayout in Vaadin Forms. we used Label of Field in HTML and want to suppress the TextField Caption. Also want to make required attribute in the left side of text field.

There is separation of tasks between graphics designer and developer, so Custom layout is convenient for us, so we cannot use any other layout right now.

Currently my test screen is as follows, [added only two fields in Form for custom layout]

As you can see that “hello” caption is top of Text Box, which I want to completely removed. This caption is just for illustration purpose, otherwise I make it empty, but still there is space in table. Also I want to make required indicator aligned with Text box.

I made a Form Field factory and tried many options but no luck.

if there is any specific CSS changes required please clearly tell me how to add it since I am new on CSS. based on previous discussion of Forum I added following style in my TextField without any sucess,

myLabel.setStyleName("inline");

and using CSS:

.inline, .inline div { display: inline; }

myLabel.setStyleName("inline");

[my case I am adding it into TextField object }
11713.png

Still waiting, any idea ?
By the way I am able to work around it by using Attach Field method (extending Form) and then using Custom Layout , but still has some layout issues.

I’m not sure about the required indicator part right now - maybe someone else can answer - but as for captions taking space:

If the caption is a string (even empty), it takes space. If it is null, it should not.