CSS 文字内容底部对齐

效果：

主要代码：

.item {
  width: 200px;
  height: 400px;
  border: 1px solid seagreen;
  display: table-cell;
  vertical-align: bottom;
}

或

.css {
  display: flex;
  align-items: flex-end;
}

完整代码实现

<template>
  <div class="mark-title-con">
    <div class="mark"></div>
    <div class="sm-title">
      <span class="name">名称名称名称名称名称</span>
      <span class="num">200</span>
      <span class="unit">个</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TitleRate',
  props: {
    name: {
      type: String,
      default: '',
    },
    num: {
      type: [String, Number],
      default: '',
    },
    unit: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.mark-title-con {
  display: flex;

  .mark {
    width: 8px;
    height: 8px;
    background: #67e5ff;
    border-radius: 50%;
    margin: 24px 4px 0 0;
  }

  .sm-title {
    display: table-cell;
    vertical-align: bottom;

    .name {
      font-size: 14px;
      font-family: Microsoft YaHei;
      color: #ffffff;
      margin-right: 10px;
    }

    .num {
      font-size: 32px;
      font-family: DIN;
      font-weight: 400;
      color: #67e5ff;
    }
    .unit {
      font-size: 12px;
      font-family: Microsoft YaHei;
      color: #67e5ff;
    }
  }
}
</style>