Looking for some guidance as I am still learning. I need the card below to have a fixed width of 38% for the image area and 62% for the content area, regardless of the size of the content (the height can increase if there is more text).
In the image above, you can see that the width of the image changes based on the card title. I want the card to only increase in height and maintain a fixed image-to-content ratio as specified 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">Learn 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>