DevExtreme jQuery - Nest One Box Into Another

<div id="boxContainer">
    <div class="box-item yellow" data-options="dxItem: { ratio: 1, baseSize: 50 }"> Item 1 </div>
    <div data-options="dxItem: { ratio: 1, baseSize: 50 }">
        <div id="nestedBoxContainer">
            <div class="box-item green"  data-options="dxItem: { ratio: 1 }"> Item 2 </div>
            <div class="box-item orange" data-options="dxItem: { ratio: 1 }"> Item 3 </div>
        </div>
    </div>
</div>

$(function() {
    $("#boxContainer").dxBox({
        direction: "col",
        height: "100%",
        width: 300
    });

    $("#nestedBoxContainer").dxBox({
        direction: "row",
        height: "100%"
    });
});

.box-item {
    text-align: center;
    padding-top: 16px;
    font-size: 16px;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }

<dx-box id="parentBox"
    direction="col"
    height="100%"
    [width]="300">
    <dxi-item class="box-item yellow" [ratio]="1" [baseSize]="50"> Item 1 </dxi-item>
    <dxi-item [ratio]="1" [baseSize]="50">
        <dx-box id="nestedBox"
            direction="row"
            height="100%">
            <dxi-item class="box-item green"  [ratio]="1"> Item 2 </dxi-item>
            <dxi-item class="box-item orange" [ratio]="1"> Item 3 </dxi-item>
        </dx-box>
    </dxi-item>
</dx-box>

import { DxBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxBoxModule
    ],
    // ...
})

.box-item {
    text-align: center;
    padding-top: 16px;
    font-size: 16px;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }