IE11でdd dl dt内のテキストの表示位置が崩れる

htmlでdd,dl,dtを使った表を作ろうとしています。
下記の例１のような表を作成したのですがchrome、firefox,edgeでは問題なく表記されたのですがIE11だと例2のように「情報」の部分が一番下になってしまいます。IE11だと<dt>内のテキストが下ぞろえになってしまうのはどうしてでしょうか。
例１：
情報
ID :1208
名前 :test
形式 :jpg
情報 :サンプル１
. :サンプル２
. :サンプル３

例2：
情報
ID :1208
名前 :test
形式 :jpg
. :サンプル１
. :サンプル２
情報 :サンプル３

「.」は空白にする方法がわからなかったので記入しているだけなので気にしないでいただけるとありがたいです。

html
1<dl class="infoList">
2    <dt>情報</dt>
3    <dd>
4        <dl>
5            <dt>ID</dt>
6            <dd>：1208</dd>
7        </dl>
8        <dl>
9            <dt>名前</dt>
10            <dd>：test</dd>
11        </dl>
12        <dl>
13            <dt>形式</dt>
14            <dd>：jpg</dd>
15        </dl>
16        <dl>
17            <dt>使用状況</dt>
18            <dd>：
19                <ul class="config-list">
20                    <li>
21                        <span class="text">サンプル1</span>
22                    </li>
23                    <li>
24                        <span class="text">サンプル2</span>
25                    </li>
26                    <li>
27                        <span class="text">サンプル3</span>
28                    </li>
29                </ui>
30            </dd>
31        </dl>
32    </dd>
33</dl>

css
1
2.infoList{
3display:flex;
4flex-direction:column;
5}
6
7.infoList dl+dl{
8    margin-top: 12px;
9}
10
11.infoList dd>dl{
12    display:table-cell;
13    font-size:10px;
14    font-weight:300px;
15    table-layout:fixedpx;
16    width:100%;
17}
18
19dl{
20    margin:0;
21}
22
23dt{
24    margin:0;
25    padding:0;
26}