怎么利用css写出左边是标签右边是内容，内容换行对齐且不能在标签的下面

 实现的页面效果如下：

wxml文件内容：（微信小程序的开发）

<view class='tan-msg'>   
    <view class='item-msg'>
      <text>交易：</text>
      <text>{{chainTxid}}</text>
    </view>

    <view class='item-msg' style="padding: 0rpx 20rpx 8rpx 158rpx;">
      <text>blockHash：</text>
      <text>{{blockHash}}</text>
    </view>
</view>

wxss的样式：

不是微信小程序将rpx换成px，rpx是相对的像素

padding: 0rpx 20rpx 20rpx 100rpx;

笔记：在CSS中，padding 属性用于设置元素的内边距。padding 的值可以有一个到四个值，分别代表上、右、下、左的内边距。这些值的顺序是顺时针的，从上方开始，然后顺时针转到右边、下方、左边。

.item-msg{
  position: relative;
  padding: 0rpx 20rpx 8rpx 100rpx;  
    /*这个左边的100rpx是留给左边的标签的。这样左边的那个就有50px空间。 */ 
    /*不是微信小程序将rpx换成px */ 
}
/*第一个text标签的样式 */ 
.item-msg text:nth-child(1) {    
  font-style: normal;
  font-weight: bold;     /* 设置字体加粗 */  
  position: absolute;     /* 设置定位为绝对定位 */  
  left: 0px;
}
.tan-msg {  
  margin:20rpx; 
  /* text-indent: 40rpx; */
  padding: 10rpx; /* 内边距 */  
  border-radius: 20rpx; /* 边框圆角 */  
  white-space: pre-wrap; /* 保留空格和换行符 */  
  word-wrap: break-word; /* 防止内容溢出容器 */ 
}