JSFiddle - React, Tailwind, and code Playground

HTML

<table ng-controller="ctrl">
    <tr ng-repeat="(k,val) in items">
        <td>{{k}} {{val[0].style}}</td>
        <td ng-repeat-start="(k2, item) in val">{{item.title}}</td>
        <td>{{item.ingredients}}</td> 
        <td ng-repeat-end>{{item.moreInfo}}</td> 
    </tr>
</table>

CSS

table, th , td  {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
}

JavaScript

var app = angular.module('app', []);
app.controller('ctrl', function($scope){

    $scope.items = {
        "Style A": [{
            title: "Title 1",
            ingredients: "Ingredients of title 1",
            moreInfo: "More info of title 1"
        }, {
            title: "Title 2",
            ingredients: "Ingredients of title 2",
            moreInfo: "More info of title 2"
        }, ],
        "Style B": [{
            title: "Title 3",
            ingredients: "Ingredients of title 3",
            moreInfo: "More info of title 3"
        }, {
            title: "Title 4",
            ingredients: "Ingredients of title 4",
            moreInfo: "More info of title 4"
        }, ],
    };
  
})