How to go about containing a float within a div with variable space

Question

I've got a series of divs ('group') with text in them, and in the bottom corner a floated div ('toggle'). The code I have works if the text within 'group' is a certain length, but since the space within varies between divs, the floated 'toggle' position does as well. I could set the 'toggle' div as an absolutely positioned element within the 'group', but then text doesn't wrap around it (and I need the text to respect the borders of 'toggle'). So, how can I go about positioning 'toggle' in the lower-right corner of my 'group' div, regardless of size? Should I just make a bunch of @media calls, or is there a better way to accomplish this? Here's my HTML:

<div class="group">
<p class="grouptitle"><a href="#">Name of group goes here</a></p>
<p class="grouptext">Brief description of group goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut  nisl ut aliquip isl isi enim ad</p>
<div class="toggle"></div>
</div>

And here's my CSS:

.group {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 300px;
  height: 300px;
  min-height: 300px;
  min-width: 300px;
  padding: 10px;
  margin: 12px;
  background-color: cyan;
  vertical-align: top; }

.toggle {
  float: right;
  width: 50px;
  height: 50px;
  background-color: green;
  bottom: 0;
  margin-right: -10px;
  margin-top: 32px; }

Thanks for reading!

EDIT: Here's a fiddle. I need to make it so the green div stays in the bottom corner of the cyan div regardless of the text within the cyan div, and with the text wrapping around the green div.

Answer 1

If I'm reading your issue correctly, I think that using:

position: absolute;
bottom:0;
right:0;

Would solve it. Here's a fiddle to show you what I'm talking about. - http://jsfiddle.net/fishgraphics/b2LxU/13/