JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div class="parent">
<div class="divider">
        <img src="http://placehold.it/50x50" style="height: 69px; width: 69px; display: block; margin: auto;"/>
</div>
<div class="divider">
        <img src="http://placehold.it/50x50" style="height: 69px; width: 69px; display: block; margin: auto;"/>
</div>
<div class="divider">
        <img src="http://placehold.it/50x50" style="height: 69px; width: 69px; display: block; margin: auto;"/>
</div>
<div class="divider">
        <img src="http://placehold.it/50x50" style="height: 69px; width: 69px; display: block; margin: auto;"/>
 </div>
 </div>

CSS

div.parent {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
div.divider {
    display: flex;
    flex-direction: row;
    align-items: center;
}
div.divider:after {
  content: '----------------------------------------------------------------------------------------';
  width: calc(100% - 69px);
  overflow: hidden;
  height: 11px;
  top: -5px;
  position: relative;
}

div.divider:last-child:after {
  content: '';
}