html - How can I dynamically place a "floating action button" between two seams?

I´d like to know how I can place a "floating action button" as Google calls it (Reference: Floating Action Button, Google Material Design) dynamically between two "seams" - depending on the element it is placed in.

In my case I use simple HTML container classes with few CSS rules to create Google Cards.

The HTML and CSS Code I used here looks like the following:

/* Google Material Design (Paper-) Cards */
*.card {position: relative;border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius: 2px;color: var(--grey800);background-color: var(--grey50);
}
*.card .card-header {position:relative;padding: 20px 16px;border-radius: 2px 2px 0px 0px;-moz-border-radius: 2px 2px 0px 0px;-webkit-border-radius: 2px 2px 0px 0px;
}
*.card .card-header > span.card-title {font-family: 'Roboto', sans-serif;font-size: 24px;font-weight: 300;line-height: 1.5em;
}
*.card .card-header > span.card-subtitle {display: block;font-family: 'Roboto', sans-serif;font-size: 15px;font-weight: 300;line-height: 1.5em;color: var(--grey700);
}
*.card .rich-media {
position: relative;
}
*.card .rich-media > img {
display: block;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
border: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
*.card .card-header ~ .rich-media > img {border-radius: 0px 0px 2px 2px;-moz-border-radius: 0px 0px 2px 2px;-webkit-border-radius: 0px 0px 2px 2px;
}
*.card .rich-media > span.card-title {
position: absolute;
left: 0;
bottom: 0;
padding: 20px 16px;
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 300;
color: var(--white);
}
*.card .card-content {
padding: 20px 16px;
}
*.card .card-content + .card-content {
border-top: 1px solid rgba(160, 160, 160, 0.2);
}
*.card .card-action {position: relative;padding: 20px 16px;border-top: 1px solid rgba(160, 160, 160, 0.2);border-radius: 0px 0px 2px 2px;-moz-border-radius: 0px 0px 2px 2px;-webkit-border-radius: 0px 0px 2px 2px;background-color: inherit;
}
*.card .card-action > a {transition: color .3s ease;font-family: 'Roboto', sans-serif;font-size: 17px;font-weight: 400;line-height: 1.5em;text-decoration: none;text-transform: uppercase;color: var(--orange500);
}
*.card .card-action > a:hover {color: var(--orange200);
}
/* Google Material Design Buttons */
*.btn {/* ... */
}
*.floating-action {width: 56px;height: 56px;text-align: center;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;
}
*.floating-action .material-icons {position: relative;top: 50%;transform: translateY(-50%);
}

<div class="card" data-elevation="1">
<!-- card header -->
<div class="card-header">
<span class="card-title">Card Title</span>
<span class="card-subtitle">Card Subtitle</span>
</div>
<!-- card image -->
<div class="rich-media">
<image src="mountains.jpg"></image>
</div>
<!-- card content -->
<div class="card-content align-left">
<!-- floating action button -->
<div class="floating-action bg-orange500" data-elevation="2">
<i class="material-icons txt-white">mail_outline</i>
</div>
<p class="flowtext">
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
</p>
</div>
<!-- card actions -->
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>