How do I move a single item to the right in a flexbox container?

I’m trying to move the "14" that you see in the picture below all the way to the right of the black bordered container it’s in and currently it’s inside a flexbox container called card-footer:

How can I do this? Here is my CSS code:

.card-footer {
    margin-top: 1rem;
    padding: 1rem;
    padding-top: 0;
    flex-direction: row;
    display: flex;
    border: 1px solid black;
}

.num-icon {
    justify-content: end;
    border: 1px solid black;
    padding: 10px;
}

Here is my HTML (JSX – react project) code:

<div className="card-footer">
    <button className="btn">Details</button>
    {project.assignment_type === 'Mini Case Studies' &&
        <>
            <a href={project.sharepoint_link} without="true" rel="noopener noreferrer" target="_blank">
                <button className="btn btn-outline">Download</button>
            </a>
            <a href={PDF} without="true" rel="noopener noreferrer" target="_blank">
                <button className="btn">Preview</button>
            </a>
        </>
    }
    {project.assignment_type !== 'Mini Case Studies' &&
        <button className="btn btn-outline" onClick={function(e){ navigator.clipboard.writeText(project.goal); alert('Text copied to clipboard!') }}
            >
            Copy to Clipboard
        </button>
    }
    // THIS IS WHAT I'M TRYING TO MOVE TO THE RIGHT
    <div className="num-icon">
        14
    </div>
</div>

>Solution :

Apply margin-left:auto

.num-icon {
    margin-left:auto;
    border: 1px solid black;
    padding: 10px;
}