Как показать содержимое div в одной строке другого div?

Question

У меня есть следующая структура в HTML:

<div class="block"> 
     <div class="question"> 
     Question 
     </div> 
     <div class="answer" data-value="true"> 
     </div> 
</div> 

То, что я хочу, чтобы показать содержимое (T или F) после того, как вопрос:

если данные значение верно:

Вопрос T

еще

Вопрос F

В CSS Я попытался сделать это таким образом:

.answer[data-value="true"]:after { 
content: "T"; 
display: inline; } 

.answer[data-value="false"]:after { 
    content: "F"; 
    display: inline; 
} 

Но это не похоже на работу, выход заключается в следующем:

Вопрос

T

или

Вопрос

F

Answer 1

Есть много решений, но один из них, чтобы сделать это:

.question, .answer {display: inline-block;} 

Ваше решение еще оставляя дивы на своем дисплее по умолчанию block, который оставляет их обоих на width: 100% по умолчанию, так что потребность для таргетинга самих div. Другие варианты включают в себя отображение таблицы/таблицы или флекса.

Answer 2

Как это может быть,

.question[data-value="true"]:after { 
 
content: "T"; 
 
display: inline; } 
 

 
.question[data-value="false"]:after { 
 
    content: "F"; 
 
    display: inline; 
 
}

<div class="block"> 
 
     <div class="question" data-value="true"> 
 
     Question 
 
     </div> 
 
</div>