How can I move the green text under the image? - html

Question

How can I move the green text from the image attached under the image icon?
I need to move it just under the image. I am using ReactJS and HTML. The text appears when a therapist has paid for their account.
<Link to={`/therapist/profile/${this.therapist.id}`} target="_blank" onClick={this.props.handleViewProfileGuest.bind(this, this.props.therapist.id)}>
<li key={this.props.index} className="tc-list-item">
{/* Avatar Container */}
<div className="tc-image-container">
<img src={this.getAvatarUrl(this.therapist)} alt='therapist-avatar' />
</div>
{/* User Profile Container */}
<div className="tc-info-container">
{/* Name & Title */}
<div className="tc-main-info">
<span className="tc-u-name">{`${this.therapist.firstName} ${this.therapist.lastName}, `}</span>
<span className="tc-u-title"> { ` ${this.therapist.title || 'Therapist'}` }</span>
</div>
<div className="flags-row">
{this.renderVerifiedFlag()}
{this.renderInsuranceFlag()}
</div>
{/* Details */}
<div className="tc-details-info">
{/* Email */}
<div className="tr-reviews-row">
<Rating placeholderRating={this.therapist.avgScore || 0}
emptySymbol={<img src={ratingStarEmpty} className="icon" alt="ratingEmpty"/> }
placeholderSymbol={<img src={ratingStarFull} className="icon" alt="ratingFull" />}
readonly/>
<span className="tr-reviews-value">{ `(${this.therapist.reviewCnt} reviews)` }</span>
</div>
{/* Phone */}
{this.renderContactInfo()}
</div>
</div>
<ReactTooltip type="info" place="right"/>
</li>
</Link>
and here is the css part
& .tc-image-container {
width: 130px;
height: 130px;
border-radius: 15px;
overflow: hidden;
}
& .tc-image-container img {
width: 100%;
height: 100%;
}
& .tc-info-container {
//margin-left: 140px;
flex: 1;
padding-left: 50px;
}

Answer 1

If I'm understanding your question correctly, its very simple... just move the div to the correct location in your html.
<Link to={`/therapist/profile/${this.therapist.id}`} target="_blank" onClick={this.props.handleViewProfileGuest.bind(this, this.props.therapist.id)}>
<li key={this.props.index} className="tc-list-item">
{/* Avatar Container */}
<div className="tc-image-container">
<img src={this.getAvatarUrl(this.therapist)} alt='therapist-avatar' />
</div>
<!-- Moved it to here -- >
<div className="flags-row">
{this.renderVerifiedFlag()}
{this.renderInsuranceFlag()}
</div>
{/* User Profile Container */}
<div className="tc-info-container">
{/* Name & Title */}
<div className="tc-main-info">
<span className="tc-u-name">{`${this.therapist.firstName} ${this.therapist.lastName}, `}</span>
<span className="tc-u-title"> { ` ${this.therapist.title || 'Therapist'}` }</span>
</div>
<!-- text was here -->
{/* Details */}
<div className="tc-details-info">
{/* Email */}
<div className="tr-reviews-row">
<Rating placeholderRating={this.therapist.avgScore || 0}
emptySymbol={<img src={ratingStarEmpty} className="icon" alt="ratingEmpty"/> }
placeholderSymbol={<img src={ratingStarFull} className="icon" alt="ratingFull" />}
readonly/>
<span className="tr-reviews-value">{ `(${this.therapist.reviewCnt} reviews)` }</span>
</div>
{/* Phone */}
{this.renderContactInfo()}
</div>
</div>
<ReactTooltip type="info" place="right"/>
</li>

Answer 2

Try moving the flag row to the left column:
// Add a new div with the class name "left-col"
<div className="left-col">
<div className="tc-image-container">
<img src={this.getAvatarUrl(this.therapist)} alt="therapist-avatar" />
</div>
// Move the flags-row div from its original place to here
<div className="flags-row">
{this.renderVerifiedFlag()}
{this.renderInsuranceFlag()}
</div>
</div>
<div className="tc-info-container">
...the rest of your DOM remains unchanged
</div>
// Give .left-col div the same width as the current image-container.
& .left-col {
width: 130px;
}
You might need to fiddle with the CSS a bit. But the general idea is here.

Answer 3

Moving the verified provider text code directly under the img code will do the trick.
Might just have to adjust bottom margin for the img for spacing.