JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<div>
    <div class="head-info">
        <span class="year-left">2000</span>
        <span class="year-right">2005</span>
        <div class="yellow-dot"></div>        
    </div>
    <br/>
    This is just a sample
</div>
<div>
    <div class="head-info">
        <span class="year-left">2000</span>
        <span class="year-right">2005</span>
        <div class="yellow-dot"></div>        
    </div>
    <br/>
    This is just a sample
</div>
<div style="width: 200px">
    <div class="head-info">
        <span class="year-left">2000</span>
        <span class="year-right">2005</span>
        <div class="yellow-dot"></div>        
    </div>
    <br/>
    This is just a sample
</div>

CSS

.head-info {
    border: 1px solid #bbb;
    border-bottom: none;    
    padding: 3px;
    position: relative;
    clear: both;
}
.head-info .yellow-dot {
    position: absolute;  
    left: 50%;
    top: -2px;
    width: 3px;
    height: 3px;
    background-color: orange;
}
.head-info .year-left, .head-info .year-right {
  font-size: 12px;    
}
.head-info .year-left {
    float: left;
}
.head-info .year-right {
    float: right;
}