How to designed View

In my project there has a view like grid.png . When i type on the search field it update grid name also.
My question is how can i set it in a div and when i search it update the div with custom title and label. As a beginner it is hard to do.
Any idea expert?
17571382.png

Like this?

        Div container = new Div();
        H1 title = new H1("");
        Span label = new Span("");
        TextField textField = new TextField();
        Grid<Bean> grid = new Grid<>(); //...
        textField.addValueChangeListener( e -> {
		   title.setText(textField.getValue());
           label.setText(textField.getValue());
        });
        container.add(title, label, textField, grid);
        add(container);

Olli Tietäväinen:
Like this?

        Div container = new Div();
        H1 title = new H1("");
        Span label = new Span("");
        TextField textField = new TextField();
        Grid<Bean> grid = new Grid<>(); //...
        textField.addValueChangeListener( e -> {
		   title.setText(textField.getValue());
           label.setText(textField.getValue());
        });
        container.add(title, label, textField, grid);
        add(container);

No. There Will no grid.There will be a list of data/news which set in the container one by one like one div after another div.

Ok, so then you can create the divs in a for loop perhaps?