CODEWITHSUNDEEP
htmlcss
user3358218
user3358218

Reputation: 5

How to show the content of a div in the same line of another div?

I have the following structure in HTML:

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

What I want is to show the content (T or F) after the Question:

if data-value is true:

Question T

else

Question F

In CSS I tried to make it that way:

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

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

But it doesn't seems to work, the output is the following:

Question

T

or

Question

F

Upvotes: 0

Views: 48

Answers (1)

ralph.m
ralph.m

Reputation: 14345

There are many solutions, but one is to do this:

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

Your solution was still leaving the divs at their default display of block, which leaves them both at width: 100% by default, so the need is to target the divs themselves. Other options include displays of table/table-cell or flex.

Upvotes: 1

Related Questions