JSFiddle - React, Tailwind, and code Playground

HTML

<header>
		<div id="header_title">
				<h1>Title h1</h1>
				<h3>Title h3</h3>
		</div>
				<aside id="header_photo">
					<img class="floatingimage" src="http://www.planwallpaper.com/static/images/Awesome-Nature-Background.jpg"/>
				</aside>
</header>

CSS

header {
  display: flex;
}

#header_title
{
	font-weight: bolder;
	text-align: center;
}

#header_photo
{
	display: none;
	max-width: 100%;
	height: auto;
  align-self: center;
}

#header_photo img {
  width: 100%;
  height: auto;
  max-height: 120px;
}

.floatingimage
{
	float: right;
}

@media all and (max-width: 1024px)
{
  	#header_title
	{
		margin-left: 10%;
		min-width: 67%;
		max-width: 77%;
		display: inline-block;
		vertical-align: top;
		position: relative;
	}

	#header_photo
	{
		display: inline-block;
    	vertical-align: top;
    	max-width: 20%;
    	height: auto;
	}
}