Float:right element not inline with float:left element

Question

I have a title #resourceWrapTitle that is being displayed in a rotated manner. One aspect I am using for positioning is float:left. When I do this, it makes my container to the right's position display somewhat downward from the top of where I am wanting it - container #resourceCont. I have this container set to float:right, so I thought it would appear right next to the title.

Does anyone know why the #resourceCont is being pushed down and how I can fix it?

Img of where I am wanting the container:

#pdfBannerRight {
	width: 300px;
	background: #2f2f2f;
	height: 450px;
	position: absolute;
	top: 18%;
	right: 0;
}
#pdfBannerRightCont {
	position: relative;
	width: 100%;
	height: 100%;
}
#resourceWrapTitle {
	float: left;
    transform-origin: top left;
	margin: 3% 0 0 8px;
    -webkit-transform: rotate(-90deg) translateX(-100%);
    transform: rotate(-90deg) translateX(-100%);
    font-family: 'Nunito', sans-serif;
    letter-spacing: .2rem;
    font-size: 1.7rem;
    color: #FFF;
    text-transform: uppercase;

}
#resourceWrapTitle:after {
	content: '';
	display: block;
	height: 4px;
	background: #FFF;
	width: 80%;
	text-align: center;
	margin: 10px auto;
}
#pdfResourceWrap {
	float: right;
	margin: 0 auto;
	padding: 20px 0;
	width: 80%;
	height: auto;
}
.pdfResource {
	width: 48%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin: 15px 1%;
	padding: 5px 0;
	text-align: center;
	-webkit-transition: all .45s ease;transition: all .45s ease;
}
.pdfResource:hover {
	background: gray;
	-webkit-transition: all .45s ease;transition: all .45s ease;
}
.pdfResource img {
	width: 50px;
	height: auto;
	margin: 0 auto;
}
.resourceTitle {
	font-family: 'Nunito', sans-serif;
	font-size: .8rem;
	letter-spacing: .1rem;
	color: #F2F2F2;
	margin-top: 5px;
	line-height: 1.4em;
	padding: 0 5px;
}

<div id="pdfBannerRight">
						<div id="pdfBannerRightCont">
							<h3 id="resourceWrapTitle">Resources</h3>
							<div id="pdfResourceWrap">
								
								<div id="resourceCont">
									<a href="#" class="pdfResource">
										<img src="https://imagineacademy.microsoft.com/content/images/microsoft-img.png" alt="Img 1">
										<h4 class="resourceTitle">Img 1</h4>
									</a><a href="#" class="pdfResource">
										<img src="https://imagineacademy.microsoft.com/content/images/microsoft-img.png" alt="Img2">
										<h4 class="resourceTitle">Img 2</h4>
									</a>
								</div>
							</div>
					</div>

Answer 1

changes that I have made:

FROM

#resourceWrapTitle {
    float: left;
}

TO

#resourceWrapTitle {
    position: absolute;
    top: 0;
    left: 0;
}

The Reason why #pdfResourceWrap is not placing itself at the top is, #resourceWrapTitle is still at the top. Its rotated but its still in the flow of the document, holding its original place. But when I removed float from it and gave it an absolute position, its out of the flow of the document, thus not holding its original place. read css box model and css position if you are still not clear.

Hope that helps. Thanks.

#pdfBannerRight {
	width: 300px;
	background: #2f2f2f;
	height: 450px;
	position: absolute;
	top: 18%;
	right: 0;
}
#pdfBannerRightCont {
	position: relative;
	width: 100%;
	height: 100%;
}
#resourceWrapTitle {
	position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
	margin: 3% 0 0 8px;
    -webkit-transform: rotate(-90deg) translateX(-100%);
    transform: rotate(-90deg) translateX(-100%);
    font-family: 'Nunito', sans-serif;
    letter-spacing: .2rem;
    font-size: 1.7rem;
    color: #FFF;
    text-transform: uppercase;

}
#resourceWrapTitle:after {
	content: '';
	display: block;
	height: 4px;
	background: #FFF;
	width: 80%;
	text-align: center;
	margin: 10px auto;
}
#pdfResourceWrap {
	float: right;
	margin: 0 auto;
	padding: 20px 0;
	width: 80%;
	height: auto;
}
.pdfResource {
	width: 48%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin: 15px 1%;
	padding: 5px 0;
	text-align: center;
	-webkit-transition: all .45s ease;transition: all .45s ease;
}
.pdfResource:hover {
	background: gray;
	-webkit-transition: all .45s ease;transition: all .45s ease;
}
.pdfResource img {
	width: 50px;
	height: auto;
	margin: 0 auto;
}
.resourceTitle {
	font-family: 'Nunito', sans-serif;
	font-size: .8rem;
	letter-spacing: .1rem;
	color: #F2F2F2;
	margin-top: 5px;
	line-height: 1.4em;
	padding: 0 5px;
}

<div id="pdfBannerRight">
						<div id="pdfBannerRightCont">
							<h3 id="resourceWrapTitle">Resources</h3>
							<div id="pdfResourceWrap">
								
								<div id="resourceCont">
									<a href="#" class="pdfResource">
										<img src="https://imagineacademy.microsoft.com/content/images/microsoft-img.png" alt="Img 1">
										<h4 class="resourceTitle">Img 1</h4>
									</a><a href="#" class="pdfResource">
										<img src="https://imagineacademy.microsoft.com/content/images/microsoft-img.png" alt="Img2">
										<h4 class="resourceTitle">Img 2</h4>
									</a>
								</div>
							</div>
					</div>