css - Justify content inside Col in Bootstrap?

Question

I'm trying to place 2 element one in the left and the other on the right inside Col and justify them horizontaly. I used justify-self: right; to place the div on the right but it's not working. My code is:

<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;
}

Answer 1

By adding Justify-content:space-between; to parent element first item is on the start line, last item on the end line in this case your parent element is subscription so :

.subscription {
       display: flex;
      Justify-content: space-between
    }