CSS ISsue

HTML

<div id="card_container">
			<div id="card_image_container">
				<img src="https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png"/>
			</div>
			<div id="card_content_container">
				<div id="card_content_title">
					<h1>ADVERT</h1>
					<h2>EXAMPLE
				</div>
				<div id="card_content_text">
					<p>
					<b>Heading</b><br/>
					Info
					</p>
					
					<p>
					<b>Heading 2</b><br/>
					Info 2
					</p>
				</div>
				<div id="card_content_actions">
				
				</div>
			</div>
		</div>

CSS

*{
	padding: 0px;
	margin: 0px;
}

#card_container{
  display: flex;
	margin-left: auto;
	margin-right: auto;
	width: 36%;
	margin-top: 10%;
	border: 1px solid grey;
}
#card_container > div{
	display: inline-block;
}
#card_image_container{
  flex: 4;
	background-color: green;
}
#card_image_container img{
	vertical-align: bottom;
	width: 100%;
	height: 100%;
}
#card_content_container{
  flex: 6;
	vertical-align: top;
	background-color: red;
}