想实现如下图的效果：

想让自动适应宽度：

			<view class="item-content">
				<view class="item-margin left-item">
					<text class="content-text">昵称</text>
				</view>
				<view class="item-margin right-item">
					<view class="right-text">张三</view>
					<image src="/static/imgs/next.png" class="right-image" mode="aspectFit"></image>
				</view>
			</view>
			<view class="usercenter-divider"></view>


CSS:
	.right-text	{
		margin-left: var(--margin-left, 20rpx);
		margin-right: var(--margin-right, 20rpx);
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 200rpx;
	}

	.item-margin{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}


	.item-content {
		width: 750tpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}


	.left-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		float: left;
		flex: 1;
	}
	.content-text {
		color: #666;
		font-size: medium !important;
		text-align: center;
		margin-left: var(--margin-left, 20rpx);
	}

	.right-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		float: right;
		margin-right: var(--margin-right, 20rpx);
		flex: 0;
	}
	.right-image {
		width: 30rpx;
		height: 30rpx;
	}
	.usercenter-divider {
		border-top: 1px dashed var(--divider-border-color, #f2f4f7);
		margin-left: var(--margin-left, 10rpx);
		margin-right: var(--margin-right, 10rpx);
	}

 结果在.right-text中，如果不设置width: 200rpx;姓名“张三”是竖排的？怎么样才能不固定设置宽度，而显示正常？