html中两行对齐,一行字体与两行字体如何对齐？

Document

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

body {

padding: 100px;

}

.wrap {

float: left;

overflow: hidden;

border: 1px solid #444;

width: 300px;

}

.rect,

.text {

display: inline-block;

}

.rect {

margin-right: 10%;

border: 1px solid red;

border-radius: 2px;

width: 14px;

height: 14px;

vertical-align: middle;

}

.text {

width: 80%;

vertical-align: middle;

}

我是内容我是内容我我是内容我是内容我我是内容我是内容我我是内容我是内容

说实话，没太看懂需求。你这个样子怎么和产品撕！