JSFiddle - React, Tailwind, and code Playground

by harsimerkaur

HTML

<div class="list">
<div class="list-item-background">
<div class="list-item">
<div class="row">

  	<div class="col-md-5 col-sm-8 col-xs-4 personal">
        <div class="avatar">
        	My image and details
        </div>

     </div>
	<div class="col-md-3 col-sm-8 col-xs-4 data">
        <div class="Call">
        call button
        </div>

     </div>
</div>
</div>
</div>
</div>

CSS

.row {
    display: flex;
    flex-wrap: wrap;
        margin-right: -1.5rem;
    margin-left: -1.5rem;
    }
    
.list-item{
    margin-bottom: 18px;
    border: solid 1px brown;
    -webkit-box-shadow: 0px 0px 14px 3px rgba(247, 248, 252, 0.7);
    box-shadow: 0px 0px 14px 3px rgba(247, 248, 252, 0.7);
    background-color: pink;
    padding: 16px 16px 12px 16px;
    border: solid 1px #f7f8fc;
    color: brown
}
.list-item-background {
    position: relative;
    background-color: black;
}

.personal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-right: solid 1px #e3e7ec;
        margin-right: 16px;
}

.col-md-5
{
    flex: 0 0 calc( 62.5% - 3rem);
    margin-left: 1.5rem;
    max-width: calc( 62.5% - 3rem);
}

.data {
    margin-left: 0rem;
    margin-top: 11px;
}

.col-md-3 {
    flex: 0 0 calc( 37.5% - 3rem);
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    max-width: calc( 37.5% - 3rem);
}