Vertically align middle divs with float to right and left

I have a username and a photo that are displayed side by side and in the middle as shown below.

Now I am trying to change the css so that the photo moves dynamically to the left and the username dynamically moves to the right.

I tried adding float: right and float left to css, but that only makes the photo appear under the username.

I've read several similar threads and tried a lot of things, but I can't seem to work it out. This is really frustrating. It might be a simple fix, but I can't see it.

Using CSS, how can I display the username on the right and the photo on the left and still have the username and photo vertically: medium with 100% width? The photo that the user uploads can be of different heights, so I cannot use the line height.

Here is my HTML code:

<div class="resumeStyleResumeTitleWrapper17">
    <div class="resumeStyleResumeTitle17">
        <div class="resumeStyleResumeTitleInner17">
            <div class="resumeStyleResumeTitleFontChange17">User Name</div>
        </div>
        <div class="resumeStyleResumeTitlePhotograph17">
            <div class="resumeStyleResumeTitlePhotographInner17">
                {# image has max-height: 149px & max-width: 149px; assigned in the css file #}
                <img class="name_details_photograph_preview_dimensions" src="{{ image_url }}" />
            </div>
        </div>
    </div>
</div>

      

        
        
        
      

    

Here is my css code:

.resumeStyleResumeTitleWrapper17 {
    display: table-cell;
    width: 100%;
}

.resumeStyleResumeTitle17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    display: table-cell;
    float: left;
    text-align: left;
    width: 100%;
}

.resumeStyleResumeTitleInner17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    display: table-cell;
    max-height: 149px;
    padding: 2px;
    text-align: left;
    vertical-align: middle;
    width: 100%;
}

.resumeStyleResumeTitleFontChange17 {
    direction: ltr;
    font-size: 32px;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
}

.resumeStyleResumeTitlePhotograph17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    display: table-cell;
    max-height: 149px;
    max-width: 149px;
    padding: 2px;
    text-align: right;
    vertical-align: middle;
}

.resumeStyleResumeTitlePhotographInner17 {
    display: inline-block;
    vertical-align: middle;
}

.name_details_photograph_preview_dimensions {
    max-height: 149px;
    max-width: 149px;
}