Recently, I have been honing my skills in HTML and CSS but encountered a sticky situation. Despite my efforts, the items within the blue square refuse to align on the right side and instead end up stacking below everything else. How can I resolve this issue? Here is what I have attempted so far:
HTML:
<div class="status-post row">
<div class="post-meta col-xs">
<center>
<img src="./testpost.png" alt/>
<p>
"This is a test status... Test. Test. Test."
</p>
</center>
</div>
<div class="post-interact col-xs-2">
<a href="#" class="vote voteup">
<img src="./img/global/upvote.png" alt/>
</a>
<span id="picidhere" class="count">100</span>
<a href="#" class="vote report">
<img src="./img/global/report.png" alt/>
</a>
</div>
</div>
CSS:
#appbody .status-post {
position: relative;
background: #76ac8b;
min-height: 300px;
padding: 25px;
margin-bottom: 25px;
opacity: 0.5;
}
#appbody .status-post .post-meta {
margin-bottom: 25px;
}
#appbody .status-post .post-meta img {
margin-left: auto;
margin-right: auto;
}
#appbody .status-post .post-meta p {
text-align: center;
font-size: 20px;
clear: both;
color: #FFF;
font-family: "Arvo";
}
#appbody .status-post .post-interact {
text-align: center;
margin: 0 auto;
height: 100%;
padding-right: 0px;
padding-left: 0px;
position: relative;
top: 50%;
transform: translateY(30%);
vertical-align: middle;
}
#appbody .status-post .post-interact .vote {
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 20px;
display: block;
}
#appbody .status-post .post-interact .report {
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 26px;
display: block;
padding-top: 12px;
}
#appbody .status-post .post-interact .count {
font-size: 25px;
color: #FFF;
display: block;
font-family: "Arvo";
padding-top: 9px;
padding-bottom: 9px;
}