JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<section id="battle-screen">
    <section id="enemy">
        <section class="description"><section class="name">CATTOSAUR</section><section class="level">Lv.5</section>
            <section class="HP"></section>
        </section><section class="image"><img src="http://placekitten.com/200/200" /></section>
    </section>
    <section id="me"><section class="image"><img src="http://placekitten.com/200/200?" /></section><section class="description"><section class="name">CATTOSAUR</section><section class="level">Lv.5</section>
            <section class="HP"></section></section></section>
    <section id="menu"></section>
</section>

CSS

#battle-screen{
    width:20em;
    height:20em;
    background-color:lime;
}

#enemy{
    height:33.3333%;
    background-color:pink;
}

#me{
    height:33.3333%;
    background-color:red;
}

.image{
    display: inline-block;
    width:10em;
    border:0;
    margin:0;
    padding:0;
    height:100%;
    background-color:blue;  
}
.image img{
  width:100%;
  height:100%;
}
.description{
   display: inline-block;
   height:100%;
   width:10em;
   background-color: yellow;
}