Search form

[ingbabic]

I want to make a search form like the one in attachment (it is from desktop app). So far I have done this:

X.FormPanel().ID("SearchForm").Title("Search Form").Height(300).Layout(LayoutType.Form).AutoScroll(true).Items
(
    fields =>
    {
        for(int i=0;i<20;i++)
        {
            fields.Add(X.Panel().Border(false).Width(800).Layout(LayoutType.HBox).Items
            (
                X.Label().Text(String.Format("Search field {0}:", i)).Padding(6),
                X.SplitButton().Text("=").Width(40).Menu(X.Menu()
                .Items(operators =>
                {
                    operators.Add(X.MenuItem().Text("="));
                    operators.Add(X.MenuItem().Text(">"));
                    operators.Add(X.MenuItem().Text("<"));                                          
                }
                )
                //.Listeners(l =>
                //{
                //    l.Click.Fn = "this.up('splitbutton').setText(menuItem.text)";
                //})
                ),
                X.TextField().Width(300).Padding(6)
            ));
        }
    }
)

I don't like that label, button and textfield are not aligned horizontally by middle. Also, I would like to have all text fields left aligned vertically. The reason why am I adding controls dynamically is because it is needed by my application design (search forms are configurable). Please help.

[ingbabic]

The reason why I want a form like this is because I want to set a search operator (like "=", "<", or ">",...). So depending of the type of search field I am adding different set of operators before search field value. So for example I want all documents which are modified before 19.08.2014 and name starting width a letter "A". In this case search form should look like in attachment. For now I am struggling to get visually search form like this.