안에 div 및 span 텍스트 배치

Question

많은 것을 시도했지만 원하는 형식을 얻을 수 없습니다. HTML :

<div class="usertype"> 
      <div class="type1"> 
       <span class="type-heading">type1 is here</span> 
       <span class="type-description">10 types have joined</span> 
       <span class="type-description">35 type will.</span> 
      </div> 
      <div class="type2"> 
       <span class="type-heading">type2 is here</span> 
       <span class="type-description">10 types are there</span> 
       <span class="type-description">35 type will.</span> 
      </div> 
      <div class="type1"> 
       <span class="type-heading">type23 is good</span> 
       <span class="type-description">50 types are there</span> 
       <span class="type-description">50 types are there</span> 
       <span class="type-description">for 2 months</span> 
      </div> 
      <div class="type2"> 
       <span class="type-heading">Type4 at last</span> 
       <span class="type-description">50 types are there</span> 
       <span class="type-description">makes their first $20</span> 
       <span class="type-description">50 types are there</span> 
       <span class="type-description">35 type will.</span> 
      </div> 
      </div> 

CSS :

div.usertype { 
    margin-top: 1em; 
} 
div.type1 { 
    float: left; 
    margin-left: 2em; 
} 
span.type-heading { 
    font-size: 14px; 
    color: #f7f7f7; 
} 

span.type-description { 
    font-size: 14px; 
    color:#959595; 
    display: block; 
} 

출력 :

내가 원하는 무엇 :

1. 클래스 type-description와 스팬 사이의 수직 거리를 줄입니다. line-height과 padding-bottom을 사용해 보았지만 움직일 수 없습니다. 일부 상위 항목 div가 display:block 일 수 있습니다.
2. 모든 유형 설명이 왼쪽으로 정렬되어 이제 가운데에 배치됩니다. float: left을 사용하면 형식이 완전히 손상됩니다.

도와주세요.

Answer 1

<div class="usertype"> 
<div class="type1"> 
<span class="type-heading">type1 is here</span> 
<span class="type-description">10 types have joined</span> 
<span class="type-description">35 type will.</span> 
</div> 
<div class="type2"> 
<span class="type-heading">type2 is here</span> 
<span class="type-description">10 types are there</span> 
<span class="type-description">35 type will.</span> 
</div> 
<div class="type1"> 
<span class="type-heading">type23 is good</span> 
<span class="type-description">50 types are there</span> 
<span class="type-description">50 types are there</span> 
<span class="type-description">for 2 months</span> 
</div> 
<div class="type2"> 
<span class="type-heading">Type4 at last</span> 
<span class="type-description">50 types are there</span> 
<span class="type-description">makes their first $20</span> 
<span class="type-description">50 types are there</span> 
<span class="type-description">35 type will.</span> 
</div> 
</div> 

<style> 

div.usertype { 
    margin-top: 1em; 
} 
div.type1 { 
    float: left; 
    margin-left: 2em; 
} 
div.type2 { 
    float: left; 
    margin-left: 2em; 
} 
span.type-heading { 
    font-size: 14px; 
    color: #f7f7f7; 
} 

span.type-description { 
    font-size: 14px; 
    color:#959595; 
    display: block; 
    line-height:15px; 
} 
</style>