I need help aligning two elements, one on the left and one on the right inside a Col, and make them horizontal. I tried using justify-self: right; to position the div on the right but it's not working. Here is my code:
<Col xs="12" className={item.subscription === 'PREMIUM' ? 'mb-1 d-flex justify-content-md-end cursorPointer' : 'mb-1 d-flex justify-content-md-end align-items-end cursorPointer'} >
{ item.subscription === 'PREMIUM' && (
<div className={`${styles.superDiv}`}>
<img
src="/svg/e.svg"
alt=""
height="26"
width="26"
className="mr-2"
/>
<span className={styles.super}>Super</span>
</div>
)}
<span className={styles.price}>{`${item.price}$`}</span>
<span className={styles.for}>/H</span>
</Col>.superDiv {
align-content: center;
text-align: center;
justify-self: right;
width: 150px;
padding: 0.5rem;
border-radius: 100px;
background: white;
}Can anyone suggest how to achieve the desired result?