在前端開發中，我們經常需要顯示一些關于產品的信息，在這些信息中通常包含了兩個部分：一是產品的標題，二是具體的信息內容。那么如何實現這樣的布局呢？

這時候，我們就可以運用CSS來實現這個布局。我們可以使用float屬性，將標題和信息內容分別分成兩列。代碼如下：

.title {
float: left;
width: 20%;
font-size: 16px;
font-weight: bold;
}
.content {
float: left;
width: 80%;
}

在上面的代碼中，.title是標題的CSS樣式，.content是信息內容的CSS樣式，我們通過設置它們的寬度和浮動方向來實現布局。

需要注意的是，為了避免出現布局問題，一定要保證兩列中的元素高度相等。如果無法保證，可以在兩列的外層再套一層div，將其設置為clearfix，來清除浮動。代碼如下：

.wrap {
width: 100%;
overflow: hidden;
}
.title {
float: left;
width: 20%;
font-size: 16px;
font-weight: bold;
}
.content {
float: left;
width: 80%;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}

通過上述代碼，我們就可以完美地實現兩列標題的顯示布局了。