0

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:

enter image description here

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>
Soccerball123
  • 741
  • 5
  • 17

2 Answers2

2

Apply margin-left:auto

.num-icon {
    margin-left:auto;
    border: 1px solid black;
    padding: 10px;
}
David Thomas
  • 249,100
  • 51
  • 377
  • 410
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

<div className="card-footer">
    <div className="btn-container"> //Add these 2 items in a div and keep the element that are trying to move separate
    <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>
    }
    </div>
    // THIS IS WHAT I'M TRYING TO MOVE TO THE RIGHT
    <div className="num-icon">
        14
    </div>
</div>
.card-footer {
    margin-top: 1rem;
    padding: 1rem;
    padding-top: 0;
    flex-direction: row;
    justify-content: space-between; //This will keep both elements at opposite ends of the container
    display: flex;
    border: 1px solid black;
}

.num-icon {
    border: 1px solid black;
    padding: 10px;
}
Aditya Rajguru
  • 1