JSFiddle - React, Tailwind, and code Playground

by Acanthus

HTML

<!--/* Header for vocabulary flashcards 
 * to be displayed in Anki Spaced Repetition Software.
 * (http://ankisrs.net) 
 * 1) bounding box
 * 2a, 2b) l,r, float (grow bounding box in height), 
 * 3) absolutely positioned box (0,0) 
 *    takes height from bounding box #1, width 100%.
 *    Needed to disaccociate from boundaries of floats
 * 4) centered txt in its own box that gets centered
 *    within its parent box #3. 
 * Overflow: Right float hides under center element 
 *    if needed. On collision with left float, further
 * overflow is hidden.
 * This seems acceptable (happens on phones in 
 * portrait view, user can rotate the device to 
 * view that content.)
 */ -->
<header>
        <div class="header-left">Verben</div>
            <div class="header-right">

        <div class="header-center">
            <div class="centerinner GWS">GWS</div></div>
            <table class="byusr right">
                <tbody>
                    <tr>
                        <td>32</td>
                        <td><span id="cat">Handeln</span>
 <span id="subcat">Aktiv</span>

                        </td>
                    </tr>
                    <tr> 
                        <td>55</td>
                        <td><span id="cat">Soziale Beziehungen, Gesellschaft und Staat</span>
 <span id="subcat">Haben und Nichthaben</span>

                        </td>
                    </tr>
                </tbody>
            </table>
            <!--div class="center">GWS</div-->
        </div>
    <!--/div-->
</header>
<!--hr class="headersep"-->
<p align="center">|
    <br/>center</p>

CSS

/* css for vocabulary flashcards
 *  (http://ankisrs.net)
 * 1) bounding box (relative)
 * 2a, 2b) l,r, float (growing bounding box in height), 
 * 3) absolutely positioned box (0,0) 
 *    takes height from bounding box #1, width 100%.
 *    Needed to disaccociate from boundaries of floats
 * 4) centered txt in its own box that gets centered within
 *    its parent box #3. 
 */
 header {
    font-family: arial;
    font-size: 12px;
    position:relative; /* shrinkwrap to contained floats */
    /* display: block  /* no need to state this here */
    width: 100%;
    margin:0;
    padding:0;
    white-space: nowrap;
    vertical-align: top;
    /* background-color: papayawhip; /* Debug */
}
.wrapper: {
    /* not needed any more since header seems to take the job */
    /* margin: 0 auto; /* */
    max-width: 100%;
    position:relative;
    display: block;
    background-color: navy;
    height:100%;
}
.header-left {
    float:left;
    display:block;
    margin-top:0;
    margin-bottom:auto;
    margin-left: 0;
    margin-right: auto;
    padding-right: 1ex;
    text-align: left;
    font-style: normal;
    font-weight: bold;
    min-width: -moz-fit-content;
    min-width: -webkit-fit-content;
    min-width: fit-content;
    max-width:45%; /* prevents growing over center object */
    overflow: auto; /* hidden: truncates, auto: scrollbar */
    color: forestgreen;
    /* background-color: #D6F2C3;  /* Debug */
}
.header-center {
    position:absolute;
    left: 0;
    width: 100%;
    margin: auto;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    height:100%;
    color: black;
    /* background-color: white; /* */
}
.centerinner {
    /*margin-left:45%;
    margin-right:45%;*/
    margin: 0 auto;
    padding-left: 1ex;
    padding-right: 1ex;
    background-color: #D6A9C9;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    height:100%;
}
}
.header-right {
    float:right;
    margin-top=0;
   ...