Adding number in top left corner of Div - html

Question

I want to add a number to the top left corner of my div's, but whatever I have tried so far has not worked properly.
Here is what I currently have:
Here is what I would like:
Here is the code:
#Office365, #OneDrive {
height: 100px;
width: 16.259%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
background-color: #F2F2F2;
}
<div class="row" id="firstAppRow">
<div class="col-sm-2" id="Office365" style="padding-top: 20px; font-weight: bold;">
<span>1</span>
<div><img src="/TrainingResourceCenter/O365Training/PublishingImages/OVbiWcG.png" height="50px" width="50px" />
<p>Office365</p>
</div>
</div>
<div class="col-sm-2" id="OneDrive" style="padding-top: 20px; font-weight: bold;">
<div><img src="/TrainingResourceCenter/O365Training/PublishingImages/wJAtQYP.png" height="40px" width="40px" />
<p>OneDrive</p>
</div>
</div>
</div>

Answer 1

He, the solution will be to use absolute position for the numbers.
Note that the blocks containing the tag with the number will need to be positioned relative so that the numbers are absolute to that block. Here is a sample code
#Office365,#OneDrive{
display: inline-block;
margin-right: 2px;
background-color: #F2F2F2;
position:relative;
border:1px solid black;
padding: 0 50px;
text-align: center;
}
#Office365 img,#OneDrive img{
width:100px;
height: auto;
}
.num{
position: absolute;
top: 5px;
left: 5px;
}
<div class="row" id="firstAppRow">
<div class="col-sm-2" id="Office365" style="padding-top: 20px; font-weight: bold;">
<div><img src="https://png.icons8.com/color/1600/office-365.png" height="50px" width="50px" />
<p>Office365</p>
<span class="num">1</span>
</div>
</div>
<div class="col-sm-2" id="OneDrive" style="padding-top: 20px; font-weight: bold;">
<div><img src="https://bcpsodl.pbworks.com/f/1477585037/onedrive.png" height="40px" width="40px" />
<p>OneDrive</p>
<span class="num">2</span>
</div>
</div>
</div>

Answer 2

Try assigning
position: relative;
to the #Office365 and #OneDrive. Also put the images inside those divs.
Then assign
position: absolute;
left: 1px;
top: 1px;
to #Office365 span and #OneDrive span.

Answer 3

absolute vs float
.a {
width: 200px;
position: relative;
border: 1px solid gray;
margin-right:20px;
display:inline-block;
vertical-align:top;
}
.viaAbsolute {
position: absolute;
top:0;
left: 0;
padding: 3px;
border: 1px solid red;
}
.viaFloat {
float: left;
padding: 3px;
border: 1px solid red;
}
<div class="a">
<span class="viaAbsolute">
1
</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus rhoncus quam quis vestibulum. Cras eu mollis nisl. Pellentesque semper tincidunt placerat.
</div>
<div class="a">
<span class="viaFloat">
1
</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus rhoncus quam quis vestibulum. Cras eu mollis nisl. Pellentesque semper tincidunt placerat.
</div>