JSFiddle - React, Tailwind, and code Playground

by dfederighi

HTML

<div style="width:500px;background-color:#333;height:210px;">

<div class="added-on-summary">
    <div class="aoitem">
        <a href="#">
            <span class="content">Button Content 1</span>
        </a>
    </div>
    <div class="aoitem-delete">
        <a href="#">
            <span class="content">X</span>
        </a>
    </div>
    <div class="aoitem-options">
       - These are options -
    </div>
</div>
    
</div>

CSS

.added-on-summary {
 width: 200px;
 background-color: #ccc;
 position: relative;
}

.aoitem {
     height: 38px;
    float: left;
}

.aoitem-delete {
        float: left;
}

.aoitem .content {
     display: inline-block;
    width: 130px;
       padding: 7px 11px 7px 3px;
    border: 1px solid #999;
}

.aoitem-delete .content {
     display: inline-block;
      width: 20px;
    height: 14px;
   padding: 7px 11px 7px 3px;
   border: 1px solid #666; 
}

.aoitem-options {
     display: block;
    height: 20px;
}