Card image and content area to be fixed size as per percentage

Question

Hope someone can suggest or help as I am a bit new. Card below needs to have a fixed width of 38% image area and 62% of content area irrespective of content size (Height can increase if text is more)

Notice in above image the image width changes based on card title. I want the card to only increase in height and have a fixed image/card content ratio as mentioned above.

Card code:

<div class="ibm-columns mainCard ibm-widget-processed ibm-sameheight-processed" data-items=".ibm-card" data-widget="setsameheight" style="width: 100%;">
                <div class="uc1 card ibm-col-12-3" style="display:block">
                    <div class="ibm-card mobileFlex ibm-no-border" style="height: auto;">
                        <div class="ibm-card__image">
                            <img id="use-case-img-1" class="thumbnailImage" src="data:image/png;=" alt="card_3"></div>
                        <div class="ibm-card__content">
                                <p id="use-case-title-3" class="cardTitle">IBM Watson Learning experience system</p>
                                <p id="use-case-sub-title-3" class="cardSubtitle">Lear how to find customers</p>
                            <p class="ibm-ind-link">
                                <a href="javascript:;" onclick="loadUseCasePage('2')" class="ibm-forward-link ibm-light"><span class="ucExplore">Explore</span></a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="uc4 card ibm-col-12-3" style="display:block">
                    <div class="ibm-card mobileFlex ibm-no-border" style="height: auto;">
                        <div class="ibm-card__image">
                            <img id="use-case-img-4" class="thumbnailImage" src="data:image/png;" alt="card_4"></div>
                        <div class="ibm-card__content">
                                <p id="use-case-title-4" class="cardTitle" style="height:78px">UC4</p>
                                <p id="use-case-sub-title-4" class="cardSubtitle">IBM customer usecase 4 subtitle change</p>
                            <p class="ibm-ind-link">
                                <a href="javascript:;" onclick="loadUseCasePage('3')" class="ibm-forward-link ibm-light"><span class="ucExplore">Explore</span></a></p>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

Adding flex-shrink:0 to ibm-card__image