---
title: Arrange Questions in a Line
product: Form Library
description: Learn how to optimize screen space in your surveys by arranging multiple short-answer questions in a single line. Explore this free demo for JavaScript to see how disabling the 'startWithNewLine' property for specific questions allows you to arrange questions side by side for a more compact and efficient survey layout.
framework: React
source: https://surveyjs.io/form-library/examples/arrange-multiple-questions-in-single-line/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Arrange Questions in a Line (React)

Usually, survey questions are displayed one under another. However, if your survey contains a succession of two or more questions that suggest short answers, you can place these questions next to each other, as shown in this demo. This helps you use screen space more efficiently.

To arrange two or more questions in one line, disable the [`startWithNewLine`](/form-library/documentation/api-reference/question#startWithNewLine) property for all these questions except the first one. For instance, this demo displays the Country, City, and Zip / Postal Code questions on the same line. `startWithNewLine` is disabled for the City and Zip / Postal Code questions.

> A survey may ignore `startWithNewLine` settings if the specified layout is impossible because of small screen width. You can see how surveys automatically adapts their layout to the screen size if you resize the browser window or view this demo on a small screen.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const root = createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "pages": [
    {
      "name": "address",
      "title": "Address",
      "elements": [
        {
          "type": "text",
          "name": "address1",
          "title": "Street Address"
        },
        {
          "type": "text",
          "name": "address2",
          "startWithNewLine": false,
          "title": "Address Line 2"
        },
        {
          "type": "dropdown",
          "name": "country",
          "title": "Country",
          "choicesByUrl": {
            "url": "https://surveyjs.io/api/CountriesExample",
            "valueName": "name"
          }
        },
        {
          "type": "text",
          "name": "city",
          "startWithNewLine": false,
          "title": "City"
        },
        {
          "type": "text",
          "name": "zip",
          "startWithNewLine": false,
          "title": "Zip / Postal Code"
        }
      ]
    }
  ]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/arrange-multiple-questions-in-single-line/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/arrange-multiple-questions-in-single-line/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/arrange-multiple-questions-in-single-line/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/arrange-multiple-questions-in-single-line/vanillajs.md)