JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="left_container">
		<div class="child1">Some Text aaaaaaaaaa</div>
		<div class="left_bottom_container">
			<div class="child2">Some Text bbbbbbbbb</div>
			<div class="child3">Some Text ccccccccc</div>
		</div>	
	</div>	
	<div class="right_container"></div>
</div>

CSS

.container{
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;    
}

.left_container{
	display: flex;
    flex-direction: column;    
    flex-grow: 3;
}

.left_bottom_container{
	display: flex;  
	margin-top: auto;
}

.child2{
  white-space: nowrap;
  overflow: hidden
  text-overflow: ellipsis;
	max-width: 200px;
	height: 20px;
	margin-bottom: 15px;
}

.child3{
  white-space: nowrap;
  overflow: hidden
   text-overflow: ellipsis;
    margin-left: 10px;
	max-width: 200px;
	height: 20px;
	margin-bottom: 15px;
}

.right_container{
	display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 1;
    align-items: flex-end;
}