How to make text overflow and overlap another div? - html

Question

I'm making a interactive periodic table of elements and I've run into an issue.
In my example below the Potassium and 39.0983 is below 2,8,8,1 that is in a separate div.
I need it so that the numbers 2,8,8,1 overlay above Potassium so that it doesn't push it down.
.base {
margin: -1px;
height: 75px;
width: 75px;
padding: 0px;
}
.element {
text-align: center;
border: 1px solid white;
cursor: pointer;
display: flex;
flex-direction: column;
}
div.element > div {
display: flex;
justify-content: space-between;
}
div.element > div code {
background-color: transparent;
font: 10px arial, sans-serif;
}
div.element > div abbr {
font-size: 140%;
font-weight: bolder;
}
div.element > div ed {
font: 10px arial, sans-serif;
}
div.element span,
p {
font: 12px arial, sans-serif;
}
div.element span {
display: block;
text-align: center;
}
div.element p {
display: block;
font: 10px arial, sans-serif;
position: relative;
top: 1px;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-1 base">
<div id="4_1" class="base element" style="background-color: rgb(255, 153, 0);">
<div>
<code>19</code>
<abbr>K</abbr>
<ed>
2
<br>8
<br>8
<br>1
</ed>
</div>
<span>Potassium</span>
<p>39.0983</p>
</div>
</div>
https://jsfiddle.net/fau2Lk3k/

Answer 1

It's not really clear how you want the image to appear. But a quick google search of periodic table elements yields this common layout:
Source: Google (image terms permit use)
Using your original code, here's a revised version:
.base {
height: 75px;
width: 75px;
padding: 0 0 0 2px;
font-family: arial, sans-serif;
font-size: 12px;
background-color: rgb(255, 153, 0);
}
.element {
display: flex;
flex-direction: column;
position: relative;
cursor: pointer;
}
div.element > code {
font-size: 140%;
font-weight: bold;
}
div.element > abbr {
font-size: 175%;
font-weight: bold;
}
div.element > ol {
position: absolute;
top: 2px;
right: 2px;
padding: 0;
margin: 0;
list-style-type: none;
}
<div class="base element">
<code>19</code>
<abbr>K</abbr>
<ol>
<li>2</li>
<li>8</li>
<li>8</li>
<li>1</li>
</ol>
<span>Potassium</span>
<span>39.0983</span>
</div>