よくある会社概要のレイアウトを実装！HTML・CSSソースコードあり！

<div class="company-profile">
	<dl>
		<dt>会社名</dt>
		<dd>株式会社 〇〇</dd>
	</dl>
	<dl>
		<dt>設立</dt>
		<dd>〇〇年△月×日</dd>
	</dl>
	<dl>
		<dt>会社所在地</dt>
		<dd>
			<div>
				<p class="dd-head">■本社</p>
				<p>〒000-0000　<br class="sp">住所住所住所住所住所住所住所住所</p>
				<p><a href="#">TEL : 00000000000</a>　　Email : sample@example.com</p>
			</div>
			<div>
				<p class="dd-head">■支社</p>
				<p>〒000-0000　<br class="sp">住所住所住所住所住所住所住所住所</p>
				<p><a href="#">TEL : 00000000000</a>　　Email : sample@example.com</p>
			</div>
		</dd>
	</dl>
	<dl>
		<dt>〇〇〇〇</dt>
		<dd>
			<p>〇〇〇〇〇〇〇〇</p>
			<p>〇〇〇〇〇〇〇〇〇〇</p>
			<p>〇〇〇〇〇〇〇〇〇〇〇〇</p>
		</dd>
	</dl>
	<dl>
		<dt>〇〇〇〇</dt>
		<dd>
			<p>〇〇〇〇〇〇</p>
			<p>〇〇〇〇〇〇〇〇〇〇</p>
		</dd>
	</dl>
	<dl>
		<dt>〇〇</dt>
		<dd>
			<p>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</p>
			<p>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</p>
		</dd>
	</dl>
</div>

.company-profile dl:nth-of-type(1) {
    border-top: 1px solid #7f7f7f;
}
.company-profile dl {
    border-bottom: 1px solid #7f7f7f;
}
.company-profile dt,
.company-profile .dd-head {
    color: #2652FF;
    font-weight: 700;
}
@media screen and (min-width: 768px) {
    .pc,.pc-br{display: block;}
    .sp,.sp-br{display: none !important;}
    .company-profile {
        max-width: 800px;
        margin: 0 auto;
    }
    .company-profile dl {
        display: flex;
    }
    .company-profile dt {
        width: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .company-profile dd {
        padding: 25px 0;
        text-align: left;
    }
    .company-profile dt,
    .company-profile dd,
    .company-profile p {
        font-size: 18px;
    }
    .company-profile dd > div:nth-of-type(n+2) {
        margin-top: 30px;
    }
}
@media screen and (max-width: 767px) {
    .pc,.pc-br{display: none !important;}
    .sp,.sp-br{display: block;}
    .company-profile {
        padding: 0 10px;
    }
    .company-profile dl {
        text-align: left;
        font-size: 14px;
    }
    .company-profile dt {
        padding: 12px 0 6px 16px;
    }
    .company-profile dd {
        padding: 6px 0 12px 16px;
    }
    .company-profile dd p {
        font-size: 14px;
    }
    .company-profile dd > div:nth-of-type(n+2) {
        margin-top: 12px;
    }
}