Css 如何使用flexbox将两个元素设置为相邻

我正在尝试使用flexbox制作css，因此我阅读了一些文章，并尝试像以下示例那样设置我的元素：

元素1和2在另一个容器中

我试图将这两个元素（1和3）设置为彼此相邻的第二个示例（第一个是我现在拥有的，另一个是我试图实现的）

但是我找不到使用Flexbox的好方法，因为我将容器设置为

flex-direction:column

            <div class="container">
            <div class="sub-ctn">
              <h5 class="1"><span>♦ </span>{{ text }}</h5>
                <span class="2">{{ value }}</span>


              <div class="3">
                  <h5>{{ text }}
              </div>
            </div>
        </div>

如果需要其他信息，请告诉我
不要同时使用
float
和
flex
。Flex本身将更容易、更好


.cont{
显示器：flex；
宽度：80%；
边框：1px纯黑；
填充：10px；
}
.左续{
身高：100%；
柔性生长：1；
}
.右续{
柔性生长：1；
显示器：flex；
弯曲方向：立柱；
}
.项目{
文本对齐：居中；
边框：1px纯黑；
保证金：3倍；
}

3.
1.
2.

.container {
    margin-right: 2.5%;
    direction: rtl;
}

.sub-ctn {
    display: flex;
    flex-flow: row;
    margin-top: 1%;
    flex-direction: column;
}       


.1 {
    width: 100%;
    direction: rtl;
    text-align: right;
}

.2 {
    float: right;
    /* text-align: right; */
}

.3 {
    margin-left: 1%;
    display: flex;
    flex-direction: column;
}