html - 使用CSS设计名片的困难

我正在尝试制作名片
姓名和标题位于中心，电子邮件和电话位于卡的最左侧和右侧

这是我的以下代码

.business-card{
   position:relative;
   border:1px solid black;
  width:200px;
}
.business-card section {
  display:flex;
  flex-flow:column;
  align-items:center;
}


.email{
  position:absolute;
  right:0;
}

<div class="business-card">
  <section>
      <span>
          name:abc
    </span>
    <span>
        title:xyz
    </span>
  </section>
 <footer>
   <span class="phone">
       123-123-123
   </span>
     <span class="email">
       [email protected]
   </span>
  </footer>
</div>
 

我正在尝试包装名称/标题，但它超出了div。

.business-card{
   position:relative;
   border:1px solid black;
  width:200px;
}
.business-card section {
  display:flex;
  flex-flow:column;
  align-items:center;

}


.email{
  position:absolute;
  right:0;
}

<div class="business-card">
  <section>
      <span>
          name:abcsfsdfjsdflkjsdjflssfsdfds
    </span>
    <span>
        title:xyz
    </span>
  </section>
 <footer>
   <span class="phone">
       123-123-123
   </span>
     <span class="email">
       [email protected]
   </span>
  </footer>
</div>
 

有人可以帮忙吗
PS：附上了我要开发的名片的示例屏幕截图

最佳答案

.card {
  border: 1px solid lightgray;
}
.title {
  display: flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
  text-align: center;
  word-break: break-all;
}
.title > div {
  width: 50%;
}
.info {
  display: flex;
  padding: 2em;
}
.info > div {
  flex: 1;
}
.info > div:nth-child(2) {
  text-align: right;
}

<div class="card">
  <div class="title">
    <div>Name: eDesignary</div>
    <div>Title: Source code platform!</div>
  </div>
  <div class="info">
    <div>Hyderabad</div>
    <div>[email protected]</div>
  </div>
</div>

如果您的问题已解决，请告诉我。