JSFiddle - React, Tailwind, and code Playground

by David Joseph Guzsik

HTML

<div class="portfolio-wrapper">
    <div class="portfolio-single">
        <div class="portfolio-thumb">
            <img src="http://placekitten.com/300" alt="">
        </div>
    </div>
    <div class="portfolio-info">
        <span>Very long text that will likely overflow the container, making the text too long to fit into this square, meaning to goes to a new line</span>
    </div>

CSS

.portfolio-wrapper {
    display: inline-block;
    width: 300px;
    border: 1px solid #000;
    padding: 10px;
}
.portfolio-single {
    margin: 0px 0px 10px;
}
.portfolio-single,
.portfolio-thumb,
.portfolio-thumb img {
    height: 300px;
    width: 300px;
}
.portfolio-info {
    border: 1px dotted gray;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 300px;
    text-overflow: ellipsis;
}