当只展开第一个元素时，如何使两个单击展开的元素在同一行上？

要使两个单击展开的元素在同一行上，可以使用CSS的flex布局来实现。具体步骤如下：

1. 在HTML中，将需要展开的元素包裹在一个父容器中，例如一个div元素。
2. 在CSS中，给父容器设置display属性为flex，这样父容器的子元素会按照一行排列。
3. 给需要展开的元素设置flex属性为1，这样它会占据父容器的剩余空间。
4. 给需要展开的元素设置一个初始宽度，例如100px，这样在初始状态下它会显示为一个小块。
5. 使用JavaScript或jQuery来监听单击事件，当点击某个元素时，将其宽度设置为100%（或者其他需要的宽度），同时将其他展开的元素的宽度设置为初始宽度。

以下是一个示例代码：

HTML:

<div class="container">
  <div class="element">元素1</div>
  <div class="element">元素2</div>
</div>

CSS:

.container {
  display: flex;
}

.element {
  flex: 1;
  width: 100px;
  border: 1px solid black;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

JavaScript/jQuery:

$('.element').click(function() {
  $(this).css('width', '100%');
  $('.element').not(this).css('width', '100px');
});

在上述代码中，点击一个元素时，它的宽度会变为100%，其他元素的宽度会变为初始宽度100px。这样就可以实现两个单击展开的元素在同一行上。