position overlaying div within another div - css

Question

I've got some 'person' divs in a 'main' div. On 'person':hover I show an overlaying div. I want it appear only within the 'main' div, not go beyond 'main's boundaries.
This way:
When cursor over AGCH div
When cursor is over JALO div
I want Jack London's right border aligned with main's right border.
The complete example here: https://jsfiddle.net/yjdrnk9o/1/
HTML
<div id="main">
<div class="person">
<span class="short-name">WISH</span>
<div class="more">
<span>William</span>
<span>Shakespeare</span>
</div>
</div>
<div class="person">
<span class="short-name">AGCH</span>
<div class="more">
<span>Agatha</span>
<span>Christie</span>
</div>
</div>
<div class="person">
<span class="short-name">JALO</span>
<div class="more">
<span>Jack</span>
<span>London</span>
</div>
</div>
</div>
CSS
#main {
position: relative;
border: 1px solid;
width: 150px;
height: 100px;
}
.person {
float:left;
border:1px solid;
margin:1px 2px;;
}
.person:hover>.more {
display: block !important;
}
.more {
z-index:1;
position:absolute;
white-space: nowrap;
background-color:gray;
}
Thank you

Answer 1

Like this? https://jsfiddle.net/yjdrnk9o/3/
I added a class to your html to distinguish the last .person from the others and then said that the .more child of the .person.right element should be aligned to the right.
#main {
position: relative;
border: 1px solid;
width: 150px;
height: 100px;
}
.person {
float:left;
border:1px solid;
margin:1px 2px;;
}
.person:hover>.more {
display: block !important;
}
.more {
z-index:1;
position:absolute;
white-space: nowrap;
background-color:gray;
}
.person:last-of-type .more {
right: 0;
}
<div id="main">
<div class="person">
<span class="short-name">WISH</span>
<div style="display:none;" class="more">
<span>William</span>
<span>Shakespeare</span>
</div>
</div>
<div class="person">
<span class="short-name">AGCH</span>
<div style="display:none;" class="more">
<span>Agatha</span>
<span>Christie</span>
</div>
</div>
<div class="person on-right">
<span class="short-name">JALO</span>
<div style="display:none;" class="more">
<span>Jack</span>
<span>London</span>
</div>
</div>
</div>

Answer 2

use :last-of-type or :nth-of-type(3)
#main {
position: relative;
border: 1px solid;
width: 150px;
height: 100px;
}
.person {
float:left;
border:1px solid;
margin:1px 2px;;
}
.person:hover>.more {
display: block !important;
}
.more {
z-index:1;
position:absolute;
white-space: nowrap;
background-color:gray;
}
.person:last-of-type .more{
right: 0;
}
<div id="main">
<div class="person">
<span class="short-name">WISH</span>
<div style="display:none;" class="more">
<span>William</span>
<span>Shakespeare</span>
</div>
</div>
<div class="person">
<span class="short-name">AGCH</span>
<div style="display:none;" class="more">
<span>Agatha</span>
<span>Christie</span>
</div>
</div>
<div class="person">
<span class="short-name">JALO</span>
<div style="display:none;" class="more">
<span>Jack</span>
<span>London</span>
</div>
</div>
</div>