<div class="case">
<div class="entry">
<dl>
<dt>バシャログ。</dt>
<dd>技術情報ブログ。</dd>
</dl>
<ul>
<li><a href="http://bashalog.c-brains.jp/author/kouraku.php">アクセシビリティといえば</a></li>
</ul>
</div>

<div class="entry">
<dl>
<dt>バシャログ。</dt>
<dd>技術情報ブログ。</dd>
</dl>
<ul>
<li><a href="http://bashalog.c-brains.jp/author/sagara.php">母校が共学に</a></li>
<li><a href="http://bashalog.c-brains.jp/author/yamashita.php">ラーメン大好き</a></li>
</ul>
</div>

<div class="entry">
<dl>
<dt>バシャログ。</dt>
<dd>技術情報ブログ。</dd>
</dl>
<ul>
<li><a href="http://bashalog.c-brains.jp/author/gami.php">社長をも素材化</a></li>
<li><a href="http://bashalog.c-brains.jp/author/sito.php">美しいデザインデータ</a></li>
<li><a href="http://bashalog.c-brains.jp/author/kagata.php">ネタの幅広さは随一</a></li>
</ul>
</div>

<div class="entry">
<dl>
<dt>バシャログ。</dt>
<dd>技術情報ブログ。</dd>
</dl>
<ul>
<li><a href="http://bashalog.c-brains.jp/author/ishida.php">フットサルの仕事がしたい</a></li>
<li><a href="http://bashalog.c-brains.jp/author/fujihara.php">JavaScript記事数1位?</a></li>
<li><a href="http://bashalog.c-brains.jp/author/fukasawa.php">密かに肉体派</a></li>
<li><a href="http://bashalog.c-brains.jp/author/yanagimachi.php">頑張ったネタは反応がない</a></li>
</ul>
</div>
</div>
.case {
  list-style: none;
  .entry {
    display: flex;
    margin: 0 0 20px;
    padding: 10px;
    border: 2px solid #CCC;
  }
  
  dl {
    display: flex;
		flex-direction: column;
		align-self: stretch;
    width: 130px;
  }
  
  dt {
    flex: 1 0 auto;
  }
  
  dd {
    margin: 0;
  }
  
  ul {
    flex: 1;
    align-self: center;
  }
}
	


	

	
View Compiled
Rerun