How to keep width when setting position absolute

Question

I have a list with a few divs inside to style them. I want to align one of the divs along the bottom edge. If I make the div position: absolute (the parent li is also absolute, so it is relative to that) then it loses the width that the element should be. If I remove the position: absolute from the div then the width of the div is right. The width of the div is not set explicitly, but should take up as much space as it can.

In the example below, I have 2 items. the div with class="rules" is the item in question. In the item that is red, the <p> is wide enough that it expands the div to the full width that it can take up, but on the item that is blue there is not much text inside the <p> so the div is not very wide. I can remove the position: absolute but then the div is not aligned to the bottom.

My question is this: Can I somehow make the width the same for all items without explicitly declaring a width, or is there some other way of positioning the div at the bottom of the list item? The only solution I can think of is to

Here is a fiddle

And the code, just in case:

HTML

<ul class="cardlist">
  <li class="blue">
    <h4>Think Twice<div class="cost">1U</div></h4>
    <div class="type">Instant</div>
     <div class="rules">
       <p>Draw a card.</p>
       <p>Flashback {2}{U}</p>
    </div>
  </li>
  <li class="red">
    <h4>Lightning Bolt<div class="cost">R</div></h4>
    <div class="type">Instant</div>
    <div class="rules">
      <p>Lightning Bolt deals 3 damage to target creature or player.</p>
    </div>
  </li>
</ul>

CSS

p, div, ul, li, body, h1, h2, h3, h4, h5, h6
{
margin: 0px;
padding: 0px;
border: 0px solid #000000;
}

.blue { background-color: rgba(15, 158, 219, 0.9);}
.red { background-color: rgba(227, 65, 16, 0.9); }

#BodyContainer
{
width: 100%;
height: 100%;
}

#BodyContainer > div, ul, li
{
display: inline-block;
}

ul
{
text-align: left;
list-style-type: none;
}

.cardlist li
{
vertical-align: top;
border: 10px solid #000000;
border-radius: 15px;
padding: 10px;
width: 250px;
height: 300px;
margin-bottom: 5px;
position: relative;
box-shadow: 5px 5px 5px #CCCCCC;
}
.cardlist li h4
{
padding: 3px;
background-color: #FFFFFF;
border: 2px solid #000000;
border-radius: 5px;
}

.cardlist .cost
{
float: right;
margin-right: 4px;
}

.cardlist .type
{
display: block;
background-color: #FFFFFF;
border: 2px solid #000000;
border-radius: 5px;
padding: 1px;
}

.cardlist li .rules
{
display: inline-block;
min-height: 100px;
background-color: #FFFFFF;
border: 2px solid #000000;
padding: 4px;
position: absolute;
bottom: 7px;
margin-right: 12px;
margin-left: 2px;
}

.cardlist li .rules p
{
width: 100%;
}

.cardlist li .pt
{
float: right;
position: absolute;
bottom: 2px;
right: 8px;
padding: 3px 8px;
background-color: #FFFFFF;
border: 2px solid #000000;
border-radius: 5px;
}

.cardlist li p
{
margin-bottom: 5px;
}

Answer 1

.cardlist li .rules doesn't have a width. It will have a max-width of parent, with width: auto.

You could give it a width: width: 100% (px: width: 123px) or stretch it with left: 0; right: 0;.