How to create an HTML form programmatically using dojo toolkit (dijit) with label, a good layout and a default style

Question

I need to create an HTML form dynamically. I'm using Dojo Toolkit and its theme named claro.css.

The examples of forms in the documentation are static and they often have an ugly layout with misaligned fields. I need a dynamic form with good layout. My main reason for using a GUI toolkit is to avoid tweaking CSS and I'm not good with it to make layout and good-looking UI.

This is my attempt. The fields are being rendered horizontally instead of vertically and the labels aren't being displayed.

var fieldList = [ /* list of fields */]
var container = ... //where it will be placed

require([
    "dijit/form/Form",
    "dijit/form/TextBox",
    "dijit/form/Button"
], function(Form, TextBox, Button){
    var form = new Form({
        'data-dojo-props': 'cols:2', //This isn't working
        //encType: 'multipart/form-data', //I don't know if it is required for REST
        action: '',
        method: '',
    });
    fieldList.forEach(function(fi){
        var field = new TextBox({
            title: fi.name,
            label: fi.name, //The label isn't being rendered
            name: fi.name,
        });
        form.domNode.appendChild(field.domNode);
    });
    
    new Button({
        label: "Search"
    }).placeAt(form.containerNode);
    
    container.domNode.appendChild(form.domNode);
    form.startup();
});