CustomField caption text and internal textfield not aligned

Hi, I hope you can help.

I have a class TextBox which extends CustomField and contains a TextField.

I set the caption of the internal Textfield to a blank string and set the caption of the CustomField to a string value in the CustomField constructor ( I want the caption to be to the left of the TextField). When the custom Textbox is added to a form the alignment of the text is slightly above the TextField (see image attachment). What do I need to do to get the caption text to align with the TextField? I have included the class constructor code below

public class TextBox extends CustomField {
	TextField textField = null;
	private String stringValue = "";
       
    public TextBox(String id, String caption){
        HorizontalLayout layout = new HorizontalLayout();       
        
        textField = new TextField(id);
        textField.setCaption( "" );
        this.setCaption(caption);
            
        layout.addComponent(textField);
        
        this.setCompositionRoot(layout);
    }
}

The caption “Filter Value” is slightly higher than the TextField
12526.png