Membership Content L-R

by Roberto Apasajja

HTML

<div class="lr">
	<div class="l">aa aa</div>
	<div class="r"><img src="https://placeimg.com/231/60/any"></div>
</div>
<div class="lr">
	<div class="l"><img src="https://placeimg.com/231/120/any"></div>
	<div class="r">aabbb</div>
</div>

CSS

.lr{
  display: flex;
  align-items: center;
  text-align:center
}
.lr>div{
  flex: 1
}
.lr>div+div{
  margin-left:3%
}
.lr + .lr{
  border-top:1px dashed #ddd;
  padding-top:3%;
  margin-top:3%
}
.l{
  background:pink;
}
.r{
  background:teal
}

img{
  width:100%;
}