JSFiddle - React, Tailwind, and code Playground

HTML

<!-- <div id="container"> -->
    <div class="row">
        <div class="imageURL">http://mywebsite.com/image1.jpg</div>
        <div class="fileSize">586 KB</div>
    </div>
    <div class="row">
        <div class="imageURL">http://mywebsite.com/image2.jpg</div>
        <div class="fileSize">785 KB</div>
    </div>
    <div class="row">
        <div class="imageURL">http://mywebsite.com/image3.jpg</div>
        <div class="fileSize">258 KB</div>
    </div>
<!-- </div> -->

CSS

#container {
    width: 100%;
}
.imageURL {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    width:auto;
    min-width:50px;
    max-width:65%;
    white-space:nowrap;
}
.fileSize {
    display: inline-block;
    /* margin-left: 100px; */
    position:relative;
    right: 0;

}
.row {
  overflow: hidden;
   white-space:nowrap;
}