JSFiddle - React, Tailwind, and code Playground

by Erik Wegner

HTML

<div class="ix-grd-row">
    <div class="ix-grd-col" style="width:25%">
         <h3>Artikelgruppe wählen</h3>

        <p class="help">Nach Klick auf den Text werden rechts die Artikel der jeweiligen Artikelgruppe angezeigt.</p>
    </div>
    <div class="ix-grd-col" style="width:45%">
         <h3>Artikel auswählen</h3>

        <p class="help">Klicken Sie auf den Warenkorb, um einen Artikel auszuwählen.</p>
    </div>
    <div class="ix-grd-col">
         <h3>Artikeldetails</h3>

    </div>
</div>
<div class="ix-grd-row">
    <div class="ix-grd-col" style="width:25%"></div>
    <div class="ix-grd-col" style="width:45%">20%</div>
    <div class="ix-grd-col" style="width:44%">44%</div>
</div>
<div ng-app="myApp" class="suchseite">
    <table>
        <tr>
            <td width="25%" valign="top">
                 <h3>Artikelgruppe wählen</h3>

                <p class="help">Nach Klick auf den Text werden rechts die Artikel der jeweiligen Artikelgruppe angezeigt.</p>
            </td>
            <td width="40%" valign="top">
                 <h3>Artikel auswählen</h3>

                <p class="help">Klicken Sie auf den Warenkorb, um einen Artikel auszuwählen.</p>
            </td>
            <td valign="top">
                 <h3>Artikeldetails</h3>

            </td>
        </tr>
        <tr>
            <td ng-controller="KategorienCtrl" valign="top">
                <ul class="kategorien">
                    <li ng-repeat="kategorie in kategorien" ng-click="setKategorie(kategorie.id)">{{kategorie.title}}</li>
                </ul>
            </td>
            <td ng-controller="ArtikellisteCtrl" valign="top">
                <ul class="artikel">
                    <li ng-repeat="a in artikel" ng-mouseover="details(a.id)">{{a.title}}
                        <img class="warenkorb" src="/SLMbilder/warenkorb.png" ng-click="shoppingDialog(a.id);">
                    </li>
                </ul>
            </td>
            <td...

CSS

.ix-grd-row {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.ix-grd-col {
    display: table-cell;
    padding: 0;
    margin:0;
    position: relative;
    vertical-align: top;
}