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">&nbsp;{ ` ${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>

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.

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.

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">&nbsp;{ ` ${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;
    }